aok Posted February 8, 2021 Share Posted February 8, 2021 I have an animation (timeline) that, when the page loads, is played after a delay of 3 seconds. What I'd like to do is, if the user clicks, to ignores the delay and plays. homeLoader: function() { let homeLoaderTimeline = gsap.timeline().delay(3), $homeLoaderOverlay = document.querySelector('div.home__loader'); homeLoaderTimeline.to($homeLoaderOverlay, { y: '-100%', duration: 0.6 }); $homeLoaderOverlay.addEventListener('click', () => { homeLoaderTimeline.play(); }); } I've tried changing this to using pause and play, and even on click setting the progress to 1 (but obviously this skips the animation). Any pointers on where I'm going wrong? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 8, 2021 Solution Share Posted February 8, 2021 Calling play() just makes sure it's unpaused and moving the playhead in the forward direction, but if the delay hasn't elapsed it doesn't force the playhead to jump to the start. So you can do: homeLoaderTimeline.play(0); // or homeLoaderTimeline.restart(); If you only want it to do that if the animation hasn't started yet: if (homeLoaderTimeline.progress() === 0) { homeLoaderTimeline.play(0); } Does that clear things up? 2 Link to comment Share on other sites More sharing options...
aok Posted February 8, 2021 Author Share Posted February 8, 2021 1 hour ago, GreenSock said: Does that clear things up? Yes, perfect. Makes sense Thanks! 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