Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
CoderJon

Scrolltrigger choppy animation with multiple scroll triggers.

Recommended Posts

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

Link to post
Share on other sites

Hey Jon and welcome to the GreenSock forums. 

 

First a couple of notes about your code:

  • ease: 'Power1.easeOut' is invalid. It should be just ease: 'power1' or ease: 'power1.out'. See the most common GSAP mistakes for more info.
  • toggleActions only applies to ScrollTrigger if 1) an animation is also applied to a ScrollTrigger and 2) a scrub is not applied to the ScrollTrigger. So in both cases where you have it it's doing nothing.

As for your question, what jumpiness are you talking about? It seems to be working for me using a trackpad even when I have small movements. Is it when the element it pinned? If so have you tried using something like anticipatePin: 1?  If not, if you remove the pinning ScrollTrigger does it still act jumpy?

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

I think you're confused. ScrollTrigger's scrubbing doesn't make the native scrolling smooth. It only scrubs through the animation. If you want the scrolling to be completely smooth you should use a smooth scrolling library along with ScrollTrigger's .scrollerProxy()

  • Like 3
Link to post
Share on other sites

Hey @CoderJon

 

If I interpret what you said correctly, this probably is, what you were referring to? (see video)

 

To me it looks, like it is the scrub: 1 trying to catch up to the scrollbar, because with scrolling the element is being moved up but you are animating it down. Because the scrub is 'intending to 'lag' behind' the scrollbar, that's sort of problematic in this scenario, I think 🤔

 

 

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Well, I think it is just in the nature of how the scrubbing works, that it would jitter like that in your case.

 

As Zach said above

 

22 minutes ago, ZachSaucier said:

ScrollTrigger's scrubbing doesn't make the native scrolling smooth. It only scrubs through the animation. If you want the scrolling to be completely smooth you should use a smooth scrolling library along with ScrollTrigger's .scrollerProxy()

 

 

  • Like 3
Link to post
Share on other sites
On 11/30/2020 at 12:32 PM, CoderJon said:

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

Where you able to find a solution? I'm having the exact issue and I can't fix it

Link to post
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.

×