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