Wilson1077

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

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.

Thank you sir, amazing library.

Hi, I am trying to add a small delay to the start my ScrollTrigger timeline with scrub. Basically as soon as the pin starts the opacity begins to fade, I would like a small delay before that happens. My current solution is to use an empty tween ('.empty-tween' is not a real element) at the beginning as shown below. However, I thought this looks/feels a bit inelegant and was hoping there was a better solution. timeline = gsap.timeline({ scrollTrigger: { trigger: '.logo_block_content_block', start: 'center center', end: '+=100%', scrub: true, pin: 'body', pinSpacing: false } }) .to('.empty-tween', {opacity: "1"}, "scene-0") .to('.example', {fill: "#F5F5F5"}, "scene-1") .to('.example1', {opacity: 0}, "scene-1") .to('.example2', {fill: "#1C3661"}, "scene-2") .to('.example3', {fill: "#6fc4c2"}, "scene-2") .to('.example4', {fill: "#6ab651"}, "scene-2") Many thanks, Liam