celli

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 ?

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?

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.

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.

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 ?

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 ?

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 ?

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.

Thank You PointC! I added maskUnits="userSpaceOnUse" and it works now. Do I need that for every mask created? I read your article on motionTricks as well (very nice, thank you!!), In your article it says to wrap my masks in <defs></defs> tags, should I do this with all SVG masks ?

Hi, I understand from the SVG Gotchas post about animating dashed-stroked with the DrawSVG plugin, and from studying PointC's demo here https://codepen.io/PointC/pen/zrQLvO . I setup my path with a duplicate path that I can use as a mask to animate my dashed path, which seems straightforward and simple, but I still can't seem to get it to work and mask-in my dashed line. Does anyone know what I am doing wrong in my reduced codePen?

perfect explanation, thanks!

right, of course! not sure why I thought we could only go to 100%. That is great! It still seems to work with immediateRender:false; I updated my codePen to reflect this, and still seems to work ...

yep, that works! Can I get the scrollTrigger to start below the bottom of the viewport? How can I set that up? Actually I was trying to do that (in some cases) because some elements that reside close to the top of the page (like this one) - I was hoping to limit the amount of scrolling before getting to the first element that animates with scroll. This was the reason I wanted to disable it on smaller monitors, since the element would appear too low in the viewport.

When using matchMedia with scrollTrigger, it works well when I start my page at < 800px and then when resizing my browser window to > 800px (just as an example). But it seems that when I resize back to less than 800px, the position of my element does not return to it's original y value (it remains far down the page). I am guessing I need to add something else to completely kill the scrollTrigger values and reset my element to it's original css positioning. What is the best way to accomplish this ? My CodePen example should illustrate what I mean.

okay, that makes sense. I'll try and figure out where to revert on resize.