Laurence

Hi, I'm trying to achieve the animation for this like in this site . (Can scroll down to this section ) Basically I want to move the text from bottom to top and vice versa. How do I achieve this kind of functionality for each of my .txt-box inside the .panel parent element?

How do I start my animation opacity from o to 1 immediately when user is scrolling down to the next section? Here in this code. The animation is using percentage of the opacity. Would like to achieve a behavior wherein when a user is scrolling at the end of the pinned section. It will Fadeoutthe previous section and then Fadein the next section. Is this achievable? If so, what's the best option to modify the code I've given? Sorry, quite new to GSAP plugin and still learning the functionalities.

Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections. I tried using this code function: function setSection(newSection) { if (newSection !== currentSection) { var tl = gsap.timeline(); tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 }); tl.to(currentSection, { autoAlpha: 0, duration: 0.5 }); var tl = gsap.timeline(); tl.to(newSection, { autoAlpha: 1, duration: 0.5 }); tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 }); currentSection = newSection; } } and set it to gsap.to(sections, {}); function like this: gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".container").offsetWidth }, onToggle: (self) => self.isActive && setSection(sections) }); However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.

Wow! Thanks! Didn't know it was possible. One more thing, how do we get rid of the pin-spacer extra height/padding when scrolling down? I can see that there's a lot of extra spacing when you scroll up/down before proceeding to another section. I have reference this, it says to hardwire it on update function. I have tried several methods and can't seem to get it to work onUpdate function on my end..

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation from start to end once it enters the section. So when it enters the pinned element, it should play the whole animation, not by every page scroll. A good reference is in here to better understand what will be the output > https://squareup.com/us/en/why-square under `Look and feel like a pro` section. Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this.