ScrollTrigger pinning does not behave as expected in combination with nuxt 3 and page transitions after page switch

[hueey 2 Likes (Newbie)]

Hi everybody,

First of all, thanks for all these awesome Tools! I have been using gsap for a while and I am amazed.

But now I am struggeling to get the scrolltrigger to work in nuxt 3. Everytime I switch a page, the scrolltrigger animation breaks. When I a disable the page transitions, the scrolltrigger animations are working again. When I set "pin" to false, the animations are also working again after the page switches. It seems like the combination of pin set to true and the page transitions are breaking the animation.

I modified a codesandbox to simulate the problem: 
https://stackblitz.com/edit/nuxt-starter-v1hu6s

 

Thanks in advance for any help or assistance!

[Cassie 4,867 Likes (Superhero)]

Hey there! Thanks for being part of club GreenSock 🥳

 

Do any of these templates help you?

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

 

If not I'm sure @Rodrigo will be able to assist when he's back at his desk!

[hueey 2 Likes (Newbie)]

Hi Cassie,

thanks for the quick response.

I used one of these templates to demonstrate the problem. But I couldn’t find a possible solution for this specific case. 

i would be happy to hear from @Rodrigo!

[Rodrigo 4,827 Likes (Superhero)]

Hi,

 

I've been looking at this in different examples (Nuxt, Vue, React, Next) for hours and I'm totally lost. This happens only when changing routes and it works as expected in codepen:

See the Pen GRByLvw by GreenSock (@GreenSock) on CodePen

 

Honestly I can't think of a single reason beyond routing for this, but I simply don't know how it generates. Maybe this could be related to the history API or something else this routing solutions use. Among the many things I tried, I wrapped each box in a new element and setting pinSpacing to false and the same keeps happening 🤷‍♂️

 

Perhaps @GreenSock can think of something or can spot the issue. Maybe the issue is quite simple but is eluding me.

 

Please stand by.

Happy Tweening!

[hueey 2 Likes (Newbie)]

thank you for your great effort!
I also recognized that this issue disappears, when I include ScrollSmoother. But the performance (especially) on mobile devices suffers from it and the pinned animations become glitchy/jumpy

[hueey 2 Likes (Newbie)]

I also tried replicating this issue in vue to see if its just nuxt related, but when I am again setting pin to true in my ScrollTrigger, the animations break. 

https://stackblitz.com/edit/vitejs-vite-zmhvvm  

I would be happy for any kind of help! Thanks in advance!

[Hance 0 Likes (Newbie)]

+1

 

I'm dealing with the same issue even just using VUE 3

[Rodrigo 4,827 Likes (Superhero)]

Hi everyone!

 

I'm still looking into this since, as I mentioned before, goes beyond the Vue/Nuxt ecosystem as we're seeing the same behaviour on React/Next as well.

 

So far I tried different animations and different versions of GSAP with the same result. We'd appreciate enormously if you could make some tests on your own, if you can spare some minutes to do so of course. No need to re-write anything as we understand that time doesn't grow on trees, just small things and if you stumble upon anything that makes a difference (even if it doesn't solve it) let us know so we can have a look.

 

Thanks for your patience and please stand by.

Happy Tweening!

[Rodrigo 4,827 Likes (Superhero)]

Hi,

 

The issue is due to the type of animation being applied to the main container of the page. Routing/Transition libraries normally demand that there has to be only one element to be animated. Hence we wrapped everything in a single DOM node. The animation we're using actually applies transforms to that element which causes issue with pinning in ScrollTrigger. 

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children"

 

There are two possible solutions for this.

1. Use pinReparent on all your ScrollTrigger instances that reside inside a transformed parent or set a default for all ScrollTrigger instances:

   ScrollTrigger.defaults({
     pinReparent: true,
   });

2. If using that approach is not an option what you could do is on the transitions configuration remove all the styles applied by GSAP on the element being animated:

   const onEnter = (el, done) => {
     gsap.set(el, { autoAlpha: 0, scale: 0.8, xPercent: -100 });
     gsap
       .timeline({
         paused: true,
         onComplete() {
           toggleTransitionComplete(true);
           // Removes all styles (including transforms)
           // once the page/route transition is completed
           gsap.set(el, { clearProps: "all" });
           done();
         },
       })
       .to(el, { autoAlpha: 1, xPercent: 0, duration: 0.25 })
       .to(el, { scale: 1, duration: 0.25 })
       .play();
   };

Both options are equally valid and should work without any issues.

 

Hopefully this solves the issues you've been experiencing. If you have any other question/issue let us know.

Happy Tweening!

[hueey 2 Likes (Newbie)]

Hey Rodrigo, this works perfectly! Thank you very much for this great effort!

[Cassie 4,867 Likes (Superhero)]

Nice one Rodrigo!