Question about turbo rooter and order of sequence

Questions
#1

Hello,

I’m actually playing with turbo rooter, trying to create a transition between my pages, a little like barba.js but with core turbo rooter.

Here is the first test code :

addEventListener('page:before-render', async (e) => {
    e.preventDefault();
    console.log('before-render');
    //await gsap.to("#mydiv", {x: 100, duration: 1});
    e.detail.resume();
});

addEventListener('page:loaded', function() {
    console.log('page:loaded');
});

addEventListener('page:render', async (e) => {
    console.log('render');
    //await gsap.to("#mydiv", {x: 100, duration: 1});
});

Here is the order of the console.log
image

Now, let’s uncomment the 2 await gsap transition.

image

The animations works well, but now, page:loaded event is triggered before render. Which prevent all my scripts initialized in page:loaded event to work.

Shouldn’t page:loaded be trigger at the end, once the page is rendered ? If this is the expected behavior, how can I make my script initialize correctly ?

Thank you

#2

I would ignore the ‘render’ event for this purpose. The two events needed should be:

  • Out animation → page:before-visit (a link has been clicked)

  • In animation → page:load (the page DOM has loaded, maybe not scripts)

Also, disable caching to make everything run smoother:

<meta name="turbo-cache-control" content="no-cache">
#3

From the look of the barba documentation

Also consider using hot controls, they could help with this. Each transition style could be container within a hot control and the connect() logic can be used for the in animation and the disconnect() logic can be used for the out animation:

Here is a basic example:

<div data-control="gsap-transition"></div>

<script>
oc.registerControl('gsap-transition', class extends oc.ControlBase {
    connect() {
        gsap.to("#mydiv", {x: 100, duration: 1});
    }

    disconnect() {
        gsap.from("#mydiv", {x: 100, duration: 1});
    }
});
</script>
#4

Hello @daftspunk, thank you for the tips.

I tried the before-visite event for the out animation, but I’m not sure how to use it correctly. Tried this :

addEventListener('page:before-visit', async (e) => {
    e.preventDefault();
    console.log('before-visit');
    await gsap.to("#header", {x: 100, duration: 1});
    //e.detail.resume(); // Method does not exists for page:before visit method
    oc.visit(e.detail.url); // So tried this, but I'm in an infinite loop as it will trigger before-visit event again
});

How can I bypass this ?

#5

Try this:

var isAnimating = false;
addEventListener('page:before-visit', async (e) => {
    if (isAnimating) {
        isAnimating = false;
        return;
    }

    e.preventDefault();
    await gsap.to("#header", {x: 100, duration: 1});
    isAnimating = true;
    oc.visit(e.detail.url);
});
1 Like
#6

Ah yes, with a flag it do the job. thank you @daftspunk

1 Like