Remove Scroll Trigger pin on reverse?

[Wilson1077]

I've been working on an idea similar to the one in this codepen and I have been wondering what is the best way to remove the pin animations from recurring on reverse (scrolling back up)? So ideally, I would like for the text to remain visible and the coloured images to stay in place while scrolling back up the page.

 

I understand the use of tl.kil(true) inside of an OnLeave() event (or maybe I don't) however I still have to remove the extra padding/spacing created by the pins as well as on the parent container that gets generated which means I also have to reposition the block to the top of the viewport (scrolljacking) which devs always try to avoid. Also, I am including ScrollTrigger.refresh()  to re-calculate the starting positions of other blocks of the same type on the same page.

 

Thanks for this insanely good product, I always enjoy browsing the forum for ideas.

See the Pen wvporZr by Wilson1077 (@Wilson1077) on CodePen

[akapowl]

Hello @Wilson1077

 

Have a look at the different threads linked in this one here, they show how to do that (I think that first one linked there is with React, the others are vanilla JS). I hope those will help. Happy scrolling!

 

 

 

 

Edit: 

Here is your example with @OSUBlake's suggestion from the first linked thread in there implemented

 

See the Pen XWVNZNB by akapowl (@akapowl) on CodePen

 

[Wilson1077]

That's a massive improvement on performance compared to how I was doing it, thank you for the reply.