ScrollTrigger + once:true + toggleClass = elements above are not triggered

[Violetta]

I try my 1st steps in scroll trigger, but I have a simple problem.
I can't show the problem with a codepen, so I've created a small example here:

 

https://www.violetta.ch/example/scrolltrigger-testcase.html#test

 

When I scroll down it works, the elements are faded in. But when I scroll up, nothing happens.

If I remove "once: true", it works, but every time, but I only want it to fade in once.

 

And yes I would like to solve this with CSS animation :-).

 

What am I doing wrong? Or how can I solve that?

 

See the Pen by example (@example) on CodePen

[Visual-Q]

Was this what you were after, with once to false.

 

Not sure what you meant by only want it to fade in once. What did you want it to do on reverse if not fade in. Having once true does prevent it from fading in again on reverse so I don't understand the issue.

 

At least there's a code pen now so we can followup on this better.

 

See the Pen BaKBozJ by Visual-Q (@Visual-Q) on CodePen

[Violetta]

I would like the elements to be faded in only once, once they are there they should not be faded out and in again.

[GreenSock]

Two things...

1. Since the scroll position is PAST several elements, those are technically beyond the associated ScrollTrigger's "end", thus they toggled the class back off and then since once was true, it killed the ScrollTrigger. I hadn't anticipated that scenario and I think it should only toggle the classes on (not off again) when "once" is set to true. I've resolved that in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js
2. You could set ScrollTrigger.config({ limitCallbacks: true }) to basically ignore the ScrollTriggers that are above the initial scroll position so that you could scroll UP to activate those elements. That seems to work fine in your demo (even without the latest beta). 

Does that help? 

[Violetta]

Thank you! Yes, that helps a lot!

 

1. In the preview version, the elements above the viewport are already shown.

2. With limitCallbacks: true the elements are not yet visible, but are faded in once when scrolling up.

 

I think it's good that you have both variants. I have now decided on variant 2 until the new release has been released.

 

Thank you!

[mikel]

Hey @Violetta,

 

If you're already loading GSAP plus GSAP scrollTrigger, why use CSS transitions for that animation?

Why not do it with GSAP instead? It'll give you more fine control over the animation.

 

See the Pen KKzPNbQ by mikeK (@mikeK) on CodePen

 

Happy batching ...

Mikel