Zoker

Hi there, I want to use a fade in animation on multiple elements bound to a scrollTrigger. My current code looks like this: gsap.from('.animation-fadein', { scrollTrigger: { trigger: '.animation-fadein', start: "center bottom", end: "bottom bottom", scrub: 0 }, opacity: 0 }); For one element this works fine, but when applying this class to multiple elements, it does not work anymore. I think the issue is, that the trigger does not use the same element as the from function. I also tried to use something like this for the trigger property, but it does not seem to work. How can I bind the trigger to the same element as the from animation? Do I need to loop trough all elements?

Hi there, Currently I have a pinned effect, where one section gets pinned and the other one slides over it. Just like this: https://codepen.io/Zoker/pen/LYzwrYe But now I want to reverse this effect and reveal the second section, while the first one slides away. An example of this can be found in the attached codepen below Currently the effect is made with CSS and an empty element. Is there any way to archive something similar easily with GSAP? Thanks!

Hi @OSUblake, Thanks for the warm welcome! Sure I created a demo here, that seems to have the same issue: https://codepen.io/Zoker/pen/abLeqra Hope that helps!

Hi there, I just tried to create a scroll trigger, which will change the opacity and position based on the scroll progress: gsap.from('.a-f-r', { scrollTrigger: { trigger: ".a-f-r", start: "top bottom", end: "center bottom", scrub: 1 }, x: 1000, opacity: 0 }); Now the issue is, that this works sometimes and sometimes does not. When I reload the page the chances are 50/50 that it works. When it does not work, the opacity just stays 0 and the element is hidden. The page does not use any caching yet or any other optimization. The site can be found here: https://shorturl.at/bjmzO The above code is located in the animation.js file Is there any way I can make this reliable? Thanks!