Pause/prevent ScrollTrigger and resume on the next scroll

[druig]

Hi. I am working on this project where I use ScrollTrigger for the scroll-based animation. I am relatively new to this library and would like to ask fo help for this specific problem/requirement. I hope you understand what I will describe.

 

What I want to happen is that when I scroll back up to the header, I want to prevent the animation from occurring when the starting point of the scroll is not the end point of the animation. An example scenario is when I start scrolling up from the bottom or middle of the content, then reach the scroll point of 141, animation is prevented from occurring. It only happens when I scroll again, where the starting point is 141.

 

Note that this rule should only apply to scrolling up

See the Pen ZYOWQYE by jrmgsnr-the-vuer (@jrmgsnr-the-vuer) on CodePen.

Edited January 6 by druig

[mvaneijgen]

I'm not completely sure what it is you're asking. 

 

you have a scrubbed timeline in ScrollTrigger, which means the timeline will be tied to the scrollbar of the visitor. But you then want it to scrub only once, but then it should reset at some point (?) and only then be scrubbed again.

 

What I can see in your setup that I would personally always avoid.

• Your using position: fixed; in your CSS but also used pinned. Personally I would have one tool handling the pinning of elements. 
• Your animating properties that are really bad for perforce, both height and padding can cause a browser repaint and thus are bad for performance. If you can I would only use transform properties like scaleY for height and translateY for paddingTop, these have much better performance.
• You're animating the element you're also using for the trigger element. This can cause issues, you're moving the element that ScrollTrigger is using for all its calculations, which can cause miss calculations
• Did you know there is a defaults object in the timeline so instead of doing ...defaultProps, you can just define them in the timeline. I've forked your pen with these tweaks but not with the full update, because I'm not sure what needs to happen

See the Pen ZYOWWWJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.