Question about toggleActions

[Violetta]

I have various elements that should be faded in when they appear in the viewport. This works so far:

 

  gsap.utils.toArray(".animate-trigger").forEach((trigger, i) => {
    ScrollTrigger.create({
      trigger: trigger,
      start: "top 90%",
      toggleActions: "play complete complete complete",
      toggleClass: "animate",
    });
  });

But if you scroll down a bit and refresh the browser and then scroll up again, the elements are also faded in. I don't want that. I only want the elements that are below the viewport to be faded in and the ones above are simply already there without animation.

 

I tried the keyword "complete". But that seems to be wrong :-).

 

How do I do that?

[Cassie]

Hey there! I'm afraid I'm struggling to understand the issue without seeing it. Would it be possible to make a demo? Codepen is great for this.

If you haven't used codepen before, here's a post explaining how.

[Violetta]

here is the Codepen example: 

See the Pen MWpgKJg by alsodenn (@alsodenn) on CodePen

 

So you understand what I mean:
First scroll down a bit, then right-click with the mouse and select "Reload Frame" in the context menu of the browser. Then scroll up again. Now the red boxes will be faded in. But I would like them to be already there and not to be faded in.

Do you understand what I mean? 

[akapowl]

Hey @Violeta

 

toggleActions and toggleClass are two seperate properties and don't work alongside each other if  I am not mistaken.

 

toggleActions is intended for triggering attached gsap-animations whereas toggleClass will toggle your class on every enter/leave.

 

From the docs:

Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

 

You class will also toggle when you scroll down and back up again - so when scrolling back up your elements will also start fading in from 0.

If you want to prevent that altogether, you could just set once: true on your ScrollTriggers and you should be good to go.

 

Is this betteer? ...or do you still need them to fade in from 0 when scrolling up again?

 

See the Pen c25ed85cb7503f677b96dda1bc90ce00 by akapowl (@akapowl) on CodePen

 

[Violetta]

That's exactly how I wanted it! Thank you!

Funnily enough, I already had this variant, but it didn't work for me because for some reason this code was still included:

 

ScrollTrigger.config({ limitCallbacks: true });

But I can't remember why :-). If I remove this code, then it works as intended.

 

Thank you for your help.