Jump to content
Search Community

Scrolltrigger choppy animation with multiple scroll triggers.

CoderJon test
Moderator Tag

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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

  • 2 weeks later...

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.
×
×
  • Create New...