TGC Posted May 16, 2023 Share Posted May 16, 2023 Hi There, I'm new to Greensock and ScrollMagic, so I'm struggling with something I'm attempting to do and would appreciate some guidance. Below is what I currently have: https://codepen.io/Submission12/pen/WNagjYz I'm trying to implement this: See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen when a user scrolls to Section 2. I'd like to show each element within scene2 with the scrollTrigger animation and then only scroll to scene3. <section id="scene2" class="panel turqoise"> <div class="box"> This is Section 2 </div> <div class="element1">This is Section 2a</div> <div class="element2">This is Section 2b</div> <div class="element3">This is Section 2c</div> <div class="element4">This is Section 2d</div> </section> Thank you! See the Pen WNagjYz by Submission12 (@Submission12) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 16, 2023 Share Posted May 16, 2023 Hi, Any particular reason to use GSAP 2.x and ScrollMagic. GSAP now has the ScrollTrigger Plugin and we're currently on version 3. I recommend you to check the docs: Also go through this video: Finally check the ScrollTrigger demos page: https://greensock.com/st-demos/ And these collections: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Hopefully this is enough to get you started. Happy Tweening! 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