scrollTrigger with timeline from / to

[Dominique]

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

See the Pen LYzGmjb by dnauroy (@dnauroy) on CodePen

[PointC]

Hi @Dominique  

 

I think this should work for you.

 

See the Pen BamvjpO by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Dominique]

Brilliant ! Thank you so much for your help !

[Dominique]

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?

[PointC]

You have scrub:true on the ScrollTriggers. If you want a specific duration, you'd need to remove that.

 

Right now you have two tweens on the timeline each with a duration of 0.5. So 50% of the scroll distance will be the first tween and 50% for the second. You could set them both to 100 seconds and get the same result with scrub set to true. Make sense?

 

You may also want to use ease:"none" since these are opacity tweens linked to the the scrub.

 

Happy tweening.

 

[Dominique]

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