Maël

Alright, thanks for the explanation ! I'm not confused at all, but I was curious about it.

Oh thanks, that works pretty well. I've red the article; it says, to avoid the behavior, "you have to use fromTo or immediateRender or a timeline" but I notice that you're using fromTo + immediateRender, what is the reason ? Thanks again, Maël

Hello folks, I'm pretty new to gsap, I've only fooled around with gsap.to() and other basic features. Today I want to create an effect that change the opacity of the object in the middle of screen. It works pretty well on scrolling down, but when I scroll up, it doesn't animate the same way. (The opacity start changing when the scrollTrigger detect the "start" condition) I understand it is the normal behavior for the code I wrote, but I can't find a solution to make it works both scroll down and scroll up My dom : <div className="list"> <p className="item item1">Growth</p> <p className="item item2">Advocacy</p> <p className="item item3">Trends</p> <p className="item item4">Instagram</p> </div> And my code : document.querySelectorAll(".item").forEach((item) => { gsap.to(item, { scrollTrigger: { trigger: item, start: "top center", end: "20% center", scrub: true }, duration: 0.4, opacity: 1 }) gsap.to(item, { scrollTrigger: { trigger: item, start: "80% center", end: "bottom center", scrub: true }, duration: 0.4, opacity: 0.4 }) }) Thanks for the help ! Happy coding ! Maël