celli Posted August 6, 2020 Share Posted August 6, 2020 Hi, I have included a CodePen to illustrate my issue. When I am scrolling downward, I have some GSAP code that transforms my elements. Wen I am scrolling upward, the GSAP code transforms them in a different way, and when we reach the top of the window the code transforms the elements in another way. The issue that I am experiencing is that, if I am scrolling fast, or if I touch the bottom and then start to scroll up and down, it *sometimes* causes the elements to jitter. When I inspect the code, it looks like my inline styles that are created by the tweens are fluctuating up and down rapidly, causing the elements to jitter repeatedly. I can usually *but not always* stop it from happening, when I re-scroll in either direction. But it is unpredictable. I am using 'overwrite: true' in most instances to try and compensate for this, in-case it is still reading the values from a previous tween, but it still occurs. Is there something that I can do to completely avoid these values from fluctuating rapidly up and down, and causing my elements to jitter ? Note: I tried using scrollTrigger to do the whole thing and recognize when I am scrolling up or down, but I was unable to figure out a way to handle that. See the Pen WNwbrpL by celli (@celli) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 Hey celli. It'd be best to throttle your scroll event listener. ScrollTrigger does that for you if you use it. If you used it in this instance you'd put this logic (you could modify it to get the scroll position from the ScrollTrigger) inside of the onUpdate callback. Additionally it's best to avoid animating width, height, and margin as they are all non-performant properties to animate. Try to stick to transforms. I also recommend that instead of using a bunch of tweens you use a timeline that you create before anything happens then just .play() or .reverse() it depending on the scroll direction. We talk more about that in the most common GSAP mistakes article: My guess is that if you make those changes you won't see anything being jittery Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 Okay, I will create the timelines and play and reverse them for sure. I really would like to do this with scrollTrigger, but I can't see how to tell if I am scrolling Down or Up (scrollDirection) or if I have reached the top with scrollTrigger. How can I achieve this ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 3 minutes ago, celli said: I can't see how to tell if I am scrolling Down or Up (scrollDirection) or if I have reached the top with scrollTrigger. How can I achieve this ? The same way that you're doing it in your pen above - just get the scroll value from the ScrollTrigger's .scroll() value. onUpdate: self => { const st = self.scroll(); } Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 I am able to use scrollTrigger like you suggested using .scroll() value, which is great! But I am having trouble even starting to understand where I can use this to see if I am scrolling up or down. It works now in a basic form (I updated my pen) , but its not seeing my var: lastScrollTop -- can you show me what you mean or how to implement that into my variable lastScrollTop ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 You should not be creating things inside of the scroll event. You'll end up with wayyyy too many of them, hah. Here's the basic setup: See the Pen GRZgqjo?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 okay, I will create my timeline and try and get this. One thing though, on my original CodePen I actually have 3 stages, one where I scroll down, one where I scroll up (which is an in-between phase) and another when I actually reach the top. How can I accomplish that with only play() and reverse() of my timeline ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 You could tween the progress of the timeline to a given label. But I didn't notice any state for when the scroll position was 0. So if it's subtle you might just leave it out Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 okay, I've updated my codePen, I have this working to play my timeline when I scroll up and down, this is awesome -- But I am still not seeing how I can get the state when I reach the top (I would be animating some other things when this happens). I added a temporary console.log to if (position === 0) but it doesn't seem to register. I think if I can get that, then I would need to figure out how to play to a label and pause, then if I hit the top I can resume my timeline. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 4 minutes ago, celli said: I added a temporary console.log to if (position === 0) but it doesn't seem to register. It's a logic issue. You have that if after an else and the previous position is greater than the new one so it never gets to that if statement. I recommend doing that one first in the if/else chain. 1 Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 ahh, right, I forgot about that. Thank You! Okay this is all working. I will work on pausing the timeline at a specific label, then resuming if I hit the top. Thanks for sticking with me here. Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 Hi Zach, I created multiple timelines in separate functions, because I actually need other things to happen when the scrolling reaches the top position and I don't think a label will work. But I think the main issue still remains, when I scroll all the way to the bottom quickly and the scrolling over scrolls or creates a negative scroll, similar to what happens on mobile, I get this constant jitter--so I am wondering if there is also a fail safe that I can put in to completely stop the calculations after it reaches the end of the timeline? Link to comment Share on other sites More sharing options...
celli Posted August 6, 2020 Author Share Posted August 6, 2020 correction: I see the issue. Is is the marginTop and the height animating, that is causing this issue. I am in the process of replacing the marginTop with a y transform, however this doesn't keep the elements below it in the flow, so my elements below the one with the y-transform will not also shift down, like when using margin -- do you suggest another property to use in place of margin with GSAP ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 7, 2020 Share Posted August 7, 2020 18 hours ago, celli said: do you suggest another property to use in place of margin with GSAP ? Nope. But it might be helpful to have all of the elements that need to be translated in a container and then apply the translation to that container instead of each one individually. Link to comment Share on other sites More sharing options...
celli Posted August 7, 2020 Author Share Posted August 7, 2020 Thanks so much Zach. I have it all working now through much trial and error! It was definitely the marginTop that was causing my main issues, and it is much better organized and using scrollTrigger, thanks to your guidance, so I really appreciate all of this. There is only thing is that it feels like the tween to the '.content' in my timeline is scrubbing even though I have scrub:false specified. This only happens only if you scroll very slow from the very top of the window, downward. I can actually scroll/scrub and effect the position of my .content div (probably not noticeable to most). Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 7, 2020 Share Posted August 7, 2020 1 hour ago, celli said: There is only thing is that it feels like the tween to the '.content' in my timeline is scrubbing even though I have scrub:false specified. This only happens only if you scroll very slow from the very top of the window, downward. I can actually scroll/scrub and effect the position of my .content div (probably not noticeable to most). I'm guessing that's relative tweens overwriting each other so there's not much distance to go to their end values but the duration is still what you tell it to be (long for how far the values need to change). 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