GSAP Timeline Example

[ghost]

Hi there,

How Would a GSAP timeline be implemented?

I tried something like this but the timeline only played on the first transition.

const transitions = [

    {
        from: '(.*)',
        to: '(.*)',
        out: (next) => {

            let tlPageTransitionOut = new TimelineMax({

                onComplete: next
            });
            tlPageTransitionOut
            .to(targetOne, 0.1, { /* Do Something */ }),
            tlPageTransitionOut.reverse();
            tlPageTransitionOut.play();
        },        
        in: function(next) {

            let tlPageTransitionIn = new TimelineMax({

                onComplete: next
            });
            tlPageTransitionIn
            .to(targetOne, 0.1, { /* Do Something */ }),
            tlPageTransitionIn.reverse();
            tlPageTransitionIn.play();

        },
    }
];

Thanks for your patience! :)

[pixelmachine]

Next is a function so you should change lines onComplete: next to onComplete: next().

[gmrchk]

Hey 👋

actually I don't think @pixelmachine is correct. Calling next() would trigger the next step right away. It seems like your timeline just doesn't finish in the in step.

However, this is a question for GSAP guys, so I can't really help.

[gmrchk]

Just remembered there is this thread https://github.com/swup/js-plugin/issues/2. Maybe a buggy version of gsap?