CoderJon Posted November 28, 2020 Share Posted November 28, 2020 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 More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 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 More sharing options...
CoderJon Posted November 30, 2020 Author Share Posted November 30, 2020 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 More sharing options...
CoderJon Posted November 30, 2020 Author Share Posted November 30, 2020 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 comment Share on other sites More sharing options...
mikel Posted November 30, 2020 Share Posted November 30, 2020 Hey @CoderJon Just another smooth alternative See the Pen oNzXLWy?editors=0110 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
CoderJon Posted November 30, 2020 Author Share Posted November 30, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 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(). 3 Link to comment Share on other sites More sharing options...
akapowl Posted November 30, 2020 Share Posted November 30, 2020 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 🤔 0001-0600 - Kopie.mp4 1 Link to comment Share on other sites More sharing options...
CoderJon Posted November 30, 2020 Author Share Posted November 30, 2020 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 comment Share on other sites More sharing options...
akapowl Posted November 30, 2020 Share Posted November 30, 2020 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(). 3 Link to comment Share on other sites More sharing options...
CoderJon Posted November 30, 2020 Author Share Posted November 30, 2020 Gotcha. Thanks I will give that a try Appreciate the responses! Link to comment Share on other sites More sharing options...
kevchcm Posted December 9, 2020 Share Posted December 9, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2020 Share Posted December 10, 2020 @kevchcm As said in this thread, the solution is to use a smooth scrolling library. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now