Violetta Posted August 2, 2020 Share Posted August 2, 2020 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 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 3, 2020 Share Posted August 3, 2020 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 3 Link to comment Share on other sites More sharing options...
Violetta Posted August 3, 2020 Author Share Posted August 3, 2020 I would like the elements to be faded in only once, once they are there they should not be faded out and in again. Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2020 Share Posted August 3, 2020 Two things... 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 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? 4 Link to comment Share on other sites More sharing options...
Violetta Posted August 3, 2020 Author Share Posted August 3, 2020 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! 1 Link to comment Share on other sites More sharing options...
mikel Posted August 3, 2020 Share Posted August 3, 2020 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now