Jump to content
GreenSock

Kai-Ziefle

ScrollSmoother interferes with transform animations

Recommended Posts

Hey GSAP,

 

first: you are awesome, thank you for these supercool libaries.

 

We want to try out the new ScrollSmoother an got stuck on the following problem:

 

We have a transform based animation with a scrollTrigger:

 

         let tl = gsap.timeline({
            scrollTrigger:{
              trigger: card,
              start: "top top",
              end: "bottom top",
              pinSpacing: false,
              pin: true,
              scrub: true,
              markers: false,
     
            },
            defaults: { overwrite: "auto"}
           
          });
          
     tl.fromTo(cardContent, {scale:1, opacity:1}, {scale: 0.8, opacity: 0.2});
          tl.to(cardContent, {opacity:0}); 

 

To avoid conflicts with the transform values  in the parent container animation (like "jumping" elements) , we use 

clearProps: true

on the parent containers animation. This works like a charm, BUT: 

with using ScrollSmoother, the same effect of "jumping" elements ist back, as ScrollSmoother is based on transforms. 

 

I'm happy for any advice on how to deal with that.

 

Thanks

Link to comment
Share on other sites

  • Kai-Ziefle changed the title to ScrollSmoother interferes with transform animations

Sorry I'm not really following. 

Most animations are done with transforms - scrollSmoother shouldn't affect that at all.

Can you pop together a minimal demo on codepen showing the 'jump' for us? Thanks so much.

Link to comment
Share on other sites

Thanks for your fast reply. I put together a minimal demo on Codesandbox that proves that my thought was wrong (and the problem is somehow related to our app architecture). Everything is working fine here and it's good to know that scrollSmoother shouldn't affect any animations. 

 

https://codesandbox.io/s/confident-roman-viuiw1

 

 

Thanks and sorry for the interruption ✌️

 

 

  • Like 1
Link to comment
Share on other sites

Glad to hear! Pop back if you narrow it down and want some eyes on the issue!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×