Jump to content
Search Community

Jittery, in-line values overlapping

celli test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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...