Reseting ScrollTrigger instances on LeaveBack

[Arillo]

Hi,

 

I am trying to create an animation that resets itself after scrolling back up:

 

So the sequence would be:

 

- Scroll down and see animation in .section

- After passing .section and scrolling back up the animation is not visible, the state of the section animation is the end state

- After scrolling further up passed .section the whole animation resets and when scrolling down again you can see the animation from scratch.

 

Issues:

 

- It seems that the end point is somehow thrown off and the unpinning of .section happens to early resulting in a jump

- I implemented the pinning on the .header section because that seems to contribute to the problem, not sure if it really is like that though.

 

Hope I was able to make myself clear, otherwise I am glad to give more explanation.

 

Thank you!

 

See the Pen mdvNZZQ by cus (@cus) on CodePen

[mvaneijgen]

Hi @Arillo welcome to the forum and thanks for being a club member 🎉

 

Your demo is really elaborate with lots of ScrollTriggers, so I didn't really get what does what and where you want your logic to start, so I've dumped down the example to just the bare minimum to show you an approach you could take. 

 

ScrollTrigger gives you a lot out of the box, but your request requires some custom logic, but luckily you can customize all of GSAP to do exactly what you want. 

 

I've stolen this logic from our own @Carl of there Creative Coding Club course (highly recommend if you still looking for a Christmas present for your self!). Below ScrollTrigger only updates if the progress forward, so scrolling up doesn't reverse the animation. Then with the callback onLeaveBack we set .progress(0) on the animation and this allows the animation to play again. 

 

Hope this setup helps point you in the right direction and happy tweening! 

 

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

[Arillo]

Hi @mvaneijgen thank you for the effort. I know the problem is a little hard to grasp.

 

In the end I realized that what I wanted is not really possible as by killing the ScrollTrigger on .section the pin-spacer is removed and that causes a jump in the scroll. I ended up doing a different animation.

 

Thanks again!