Scroll Trigger and position sticky

[shurik]

Hello! There is a problem when creating the Scroll Trigger animation with position:sticky
Animated elements appear immediately on the screen.
But if I scroll up and down the animation returns to normal

There is no such problem when using pin:true;

See the Pen abXJgpE by shurikatik (@shurikatik) on CodePen

[shurik]

See the Pen LYqWKgM by shurikatik (@shurikatik) on CodePen

How animation should work

[mvaneijgen]

Hi @shurik welcome to the forum and thanks for being a club member 🎉

 

That is correct, when working with ScrollTrigger it is better not to set sticky elements (inside the scroll container) and use the pin property of ScrollTrigger to pin elements. 

 

Is there some particular reason why you don't want to use the pin property of ScrollTrigger, because your second pen looks perfect and is how I would build it. 

 

Hope it helps and happy tweening! 

[shurik]

In a simple example everything looks great. When there are more such elements and more animations inside, slowdowns occur.
So they are less noticeable

Thanks for the answer) I’ll know not to do that)

[mvaneijgen]

14 minutes ago, shurik said:

When there are more such elements and more animations inside, slowdowns occur.

Oh, if you have an example of that, maybe a screen recording and with what browser/OS, we could take a look for you. Keep in mind that if you have something like Chrome DevTools open slowdowns may occur, but when you close that and just view the site like normal, those normally go away. In your current setup demo I can't see anything that could cause issues.

 

I'm not sure what ++time means on line 23 is it the same as time++? Which increments time by 1? I would take a look at the position parameter there is a lot of different settings you could use which may be easier, by default GSAP will animate every tween in sequence and with the position parameter you can set other tweens to start relative to the previous tween instead of setting fixed values (you are doing now). Also you almost never need .fromTo() only at specific edge cases, GSAP will just animate to or from the default if you do a .from() or .to()

 

Let us know if we can help with anything else! Happy tweening!