ElDedo

Thanks for the Solution. This is indeed a much smoother solution and the way you did this with the timline is a way smarter approach. Will go for this now more often!

Thanks for your answers! Here I created a little Demo. Also when scrolling back up it´s not working the way it´s working by scrolling down (different timing) https://codepen.io/webkonditorei/pen/rNJgKeK

Hey! I got a Section on a homepage where background colours are changing by scrolling. The first transition is working fine, but with the second scrollTrigger it´s just changing without any transition. Why does this happen? Here´s the live site link: https://fairnergy.webkonditorei.de/ --> It´s about the 4th section where the text is sticky on the left and cards are moving up on the right. Here´s the GSAP i wrote for animating the elements: /* First Trigger */ gsap.to('#partners', { scrollTrigger: { trigger: '#trigger-color', toggleActions: 'play none none reverse', }, background: "#6B6B6B", ease: "power4.inOut", }); gsap.to('.toggle-text', { scrollTrigger: { trigger: '#trigger-color', toggleActions: 'play none none reverse', }, color: "#F6F6F6", ease: "power4.inOut", }); gsap.to('.partner-box', { scrollTrigger: { trigger: '#trigger-color', toggleActions: 'play none none reverse', }, background: "#505050", duration: 1, }); /* Second Trigger */ gsap.to('#partners', { scrollTrigger: { trigger: '#trigger-color1', toggleActions: 'play none none reverse', }, background: "white", ease: "power4.inOut", }); gsap.to('.toggle-text', { scrollTrigger: { trigger: '#trigger-color1', toggleActions: 'play none none reverse', }, color: "#E29863", }); gsap.to('.partner-box', { scrollTrigger: { trigger: '#trigger-color1', toggleActions: 'play none none reverse', }, background: "#F9E8DC", duration: 1, });

Thanks, that´s it!!!

@SteveS That’s what I did. i added a third div within the „Laptop“ Div, but the one I’ve added just gets faded in, but the second doesn’t get faded out. So the pen I’ve got now is more or less what I need, but I need to be able to add as many divs in the „Laptop“ div as I need and all elements in there are getting faded in / out by scrolling while the left div („text“) is pinned.

Hey! I want to create a section which has two Div's. In the left Div I got a Heading and a Paragraph, in the right Div I got a few Images and Text. I want to have the left Div sticky and change the right Div a few times on Scroll (just a Fade or sth.). When all the right Div's were schown I want the user go ahead further down the page (normal scrolling). So Text on the left gets sticky, div on the right fades in and out on scroll. How can I achieve this? *** Sorry i´m pretty new to GSAP*** ***Edit*** I got this now, but by adding a third div on the right side this technique is not working anymore... How can I solve this?

I want to animate my nav container (change background) when hitting a scrollTrigger. Working fine as it should, but I want to reverse the animation when I scroll back to the scrollTrigger again. How di I get this done? This is what I got so far: gsap.to('#navContainer', { scrollTrigger: '#backgroundTrigger', background: "red", duration: 1.2, ease: "power4.inOut" });