dlsmoker Posted July 8, 2020 Share Posted July 8, 2020 Hello everyone, I started using gsap for a couple of days and I have a task I can't wrap my head around. I have an overlay that is displayed whenever there is a loading event, like changing pages or making an ajax request. Inside the overlay I have 2 text elements. I want to animate both of them. What I was thinking of doing, is create a timeline at startup with all the animations, and only play it when the overlay is shown (a class is added to the html element). Here's a pseudo code of how I would like to have it work const tl = gsap.timeline(); const animation1 = el1.from({...}); const animation2 = el2.from({...}, '+=0.5'); tl.add(animation1); tl.add(animation2); // at this stage, the timeline is stopped . . . // when I click a button, I show the overlay and I play the timeline . . . // when I close the overlay, I stop the timeline and reset . . . // repeat click/close overlay Is it possible to do so? I would use the same technique for another animation that is triggered by ScrollTrigger. I have 8 sections on my home page, and whenever I scroll to a section, I want that section's header to animate in, so I thought about creating these reusable timelines that I can play and pause whenever. Thank you Link to comment Share on other sites More sharing options...
elegantseagulls Posted July 8, 2020 Share Posted July 8, 2020 Hi @dlsmoker, I think what you're missing the the pause play functionality. So something like: const tl = gsap.timeline({ paused: true }); // inside button click function tl.play(); // inside close overlay function tl.pause(0); As for ScrollTrigger, that functionality is built into it. So animations are automatically played/paused there. I'd highly recommend looking over the docs, and learning center:https://greensock.com/docs/https://greensock.com/learning/ 4 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