dotun12 Posted July 17, 2020 Share Posted July 17, 2020 I want to use the same animation and same trigger element for different content in a section. <section class="sec"> <h4><span class="animation">Section content 1</span></h4> <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p> </section> <section class="sec"> <h4><span class="animation">Section content 2</span></h4> <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p> </section> <section class="sec"> <h4><span class="animation">Section content 3</span></h4> <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p> </section> gsap.utils.toArray('.sec').forEach((sec, i)=>{ let tl = gsap.timeline(); tl.from('.animation',{duration:0.1, y:'100%', ease:'Power2.out'}); ScrollTrigger.create({ animation: tl, trigger: sec, markers: true, start: 'top top', end: 'top', scrub: 2 }); }); See the Pen VweVZwE by onseyi (@onseyi) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 Hey dotun12. I don't understand your question. Can you please create a minimal demo and explain what you're wanting to happen instead? Side notes: Your ease is invalid. It should be ease: 'power2'. You can use yPercent instead of y: some percent. Like yPercent: 100. Link to comment Share on other sites More sharing options...
dotun12 Posted July 17, 2020 Author Share Posted July 17, 2020 Hi ZachSaucier, I have added the codepen, if you notice when the scoller line get to the first start line it show all the content for all section, but I want it to only show the content for that section. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 This is because you're passing in a generic selector string ('.animation') as the target. The target should be restricted to the particular section (sec.querySelectorAll('.animation')). See the most common GSAP mistakes post for more information. 1 1 Link to comment Share on other sites More sharing options...
dotun12 Posted July 17, 2020 Author Share Posted July 17, 2020 Thank, ZachSaucier, one more thing I want the content to appear once, not appear anytime scroll up or down. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 So add once: true to the ScrollTrigger vars. Link to comment Share on other sites More sharing options...
dotun12 Posted July 17, 2020 Author Share Posted July 17, 2020 Hi ZachSaucier, I added 'once: true', but did not work ScrollTrigger.create({ animation: tl, trigger: sec, markers: true, start: 'top top', end: 'top', scrub: 2, once: true }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 Sorry, I didn't realize you had a scrub applied. once doesn't work with scrub. You'll need to kill off the ScrollTrigger once the animation completes in that case. See the Pen abdQbpg?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 17, 2020 Share Posted July 17, 2020 In the next release of ScrollTrigger, I've added that functionality. You can preview it at https://assets.codepen.io/16327/ScrollTrigger.min.js 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