Dominique

It definitely makes sense! Great, thanks again a lot @PointC

Hello again @PointC, Your code works like a charm. But it doesn't seem like the duration property changes anything. I've tried to modify it from 0.1 to 5 without any significant effect, even rewriting it this way: panel_tl.fromTo(panel, { opacity: 0 }, { opacity: 0, duration: 5 }); Would you have any hint?

Brilliant ! Thank you so much for your help !

Dear all, I would like to use ScrollTrigger combined with a timeline in order to show every div with the class "step" this way: as they appear, the opacity increases, and then, as they disappear from the viewport, the opacity decreases. I've tried with this script : panel_tl = gsap.timeline(); panel_tl.from(".step", {opacity: 0, duration: 0.5}); panel_tl.to(".step", {opacity: 0, duration: 0.5}); gsap.utils.toArray(".step").forEach(function (panel) { ScrollTrigger.create({ animation: panel_tl, trigger: panel, start: "top 90%", end: "bottom 10%", scrub: true, markers: true, toggleActions: "resume pause reverse pause" }) }); However, any .step div that enters the viewport creates the timeline for all of them. How can I address just one single .step div at a time, with an in and out effects? Thank you very much for your help, Dominique

Thank you very much Akapowl, this was really helpful!

Hello, I was using until now TweenLite to animate boxes reordered via the order flex property and it's still working well. However, reading this ( ), I understand it's time to migrate to GSAP. Could you tell me how to adapt this script (https://codepen.io/osublake/pen/eJGrPN) to make it "GSAP-3" compatible ? The same code can be found here : https://gist.github.com/sttt/7740bd213f1618bb8479ce9b8220af18 I can make it work replacing TweenLite.fromTo with gsap.fromTo and loading the appropriate library, and replacing the lines var x = box.transform.x + lastX - box.x; var y = box.transform.y + lastY - box.y; with var x = lastX - box.x; var y = lastY - box.y; because the transform property has no value attached anymore. Yet the first time it launches, the animation is a bit odd. So I'm trying to find the transform value back. Thank you very much for your help. Dominique