Share Posted February 15, 2022 I want 3 boxes to fade in one after the other, but only after you've arrived in that section. In my test here, the boxes are in section3. The first box fades in, but the others don't. What am I doing wrong? (Note: The boxes can't have unique classes) See the Pen KKWyRvV by christiemade (@christiemade) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 15, 2022 Hi @Christiemade, The thing that stands out the most to me is that you're tying the tween to `scrub`, meaning it takes scrolling to progress the tween. If you just want them to appear, you can remove that. Also, you don't have to define each tween separately since they share the same selector and are tweening the same properties. You can offset them with a stagger. Have a look, See the Pen abVVowa?editors=0010 by sgorneau (@sgorneau) on CodePen Lastly, if you're going to tween a property that you've defined in CSS (opacity in this case), it's best to pull that out of CSS and either use a set() or fromTo() in GSAP. This is especially true for transforms. And, while opacity is certainly valid, it's best to use the GSAP special property "autoAlpha" as it handles both opacity and visibility. Hope this helps! Shaun 3 Link to comment Share on other sites More sharing options...
Author Share Posted February 15, 2022 Wonderful, that is what I need. Thank you for your help and the explanation! Link to comment Share on other sites More sharing options...
Share Posted February 15, 2022 Excellent! Happy to help. Link to comment Share on other sites More sharing options...
Author Share Posted February 15, 2022 Any blind guesses as to why, in my actual implementation I get these errors: gsap.min.js?ver=5.9:10 GSAP target .boxes .box not found. https://greensock.com ScrollTrigger.min.js?ver=5.9:10 Please gsap.registerPlugin(ScrollTrigger) Link to comment Share on other sites More sharing options...
Share Posted February 15, 2022 My guess would be that .box elemets are not children of .boxes in your code. I'd have to take a look to really know. Link to comment Share on other sites More sharing options...
Share Posted February 15, 2022 Yep, I think Shaun is right. Also, it looks like you forgot to gsap.registerPlugin(ScrollTrigger) in your project. In other words, make sure you register the plugin before you try to use it Another reason your target wasn't found is you might be running that JavaScript code in your <head>, before those elements even exist (the browser hasn't parsed them yet). So make sure you either put your script at the END of your <body> or just wrap it in a "load" or "DOMContentLoaded" event listener so that everything exists before your code executes. Link to comment Share on other sites More sharing options...
Author Share Posted February 15, 2022 DOMContentLoaded did the trick. Thanks again! 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