[Scrolltrigger choppy animation with multiple scroll triggers.]

Gotcha. Thanks I will give that a try  Appreciate the responses!

[Scrolltrigger choppy animation with multiple scroll triggers.]

Yes! that's it. If you set the scrub to true then it goes away. But then you lose the smoothness of the animation!  

[Scrolltrigger choppy animation with multiple scroll triggers.]

Hey thanks for the suggestion Mikel  I need the animation to trigger BEFORE the pinning starts which I think is where this weird/not great behaviour is happened.

 

I modified your pin to suit my use case scenario and it still seems to do the same thing

 

See the Pen dypoXww by jonathan-wong-code (@jonathan-wong-code) on CodePen

[Scrolltrigger choppy animation with multiple scroll triggers.]

So I've also noticed it happens here as well.

 

See the Pen oNzXLgp by jonathan-wong-code (@jonathan-wong-code) on CodePen

 

Does it have something to do with trying to start an animation outside of its container on the Y-axis? Here we're just trying to start it 500 px above the trigger element and it seems to exhibit the same behaviour

[Scrolltrigger choppy animation with multiple scroll triggers.]

Hey Zach thank you! And thanks for the taking the time to answer my question!  We picked up GSAP for a project at work and I've taken some of Carl's courses! It's a great library!

 

It looks like it still does it when the element isn't pinned. I also tried anticipate pin: 1 and it doesn't seem to work=/.

 

To me it kind of looks like a "bunny hop" up when you scroll down slightly...or what I think more accurately is happening is that when I scroll down...there might be a slight delay before the element moves down with it?

If you contrast that with this

See the Pen YzGXqXN by jonathan-wong-code (@jonathan-wong-code) on CodePen

where there is no second trigger for pin and the animation looks smooth  I think you can see the difference.

[Scrolltrigger choppy animation with multiple scroll triggers.]

Hi! So the basic idea is that I want my animation to start 500 pixels before the trigger element. But I'd also like it pin AT the trigger.

 

Based on some research, I'd found these posts

 

 

Advocating the use of creating separate triggers for the animation and the pinning. However when I tried this my fade animation appears to "stutter" or hesitate or "jump up" when you use a series of "short scroll down" strokes. AKA not one smooth motion... This is also apparent when used a regular mechanical mouse than a trackpad.  From what i can tell most of the choppy happens in that 700px of "start" from the first trigger...and after it passes the pin trigger it smoothes out.

 

If I remove it and start the animation on the same Trigger as the pin it smoothes out.  I figure it has something to do with having 2 triggers but I'm not sure it is.

 

Any help is appreciated thanks!

See the Pen ZEpYzYz by jonathan-wong-code (@jonathan-wong-code) on CodePen