Violetta Posted May 4, 2021 Share Posted May 4, 2021 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? Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 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. Link to comment Share on other sites More sharing options...
Violetta Posted May 4, 2021 Author Share Posted May 4, 2021 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? Link to comment Share on other sites More sharing options...
Solution akapowl Posted May 4, 2021 Solution Share Posted May 4, 2021 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 2 1 Link to comment Share on other sites More sharing options...
Violetta Posted May 4, 2021 Author Share Posted May 4, 2021 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. 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