Jloafs Posted October 12, 2022 Share Posted October 12, 2022 Hi guys I'm trying to figure out how to pause a timeline (between these .to) then add a button to resume the playback from the pause point. Any help would probably save me hours banging my head against a wall .to("element", { delay: -1, opacity: 1, y: "0", duration: 1.5, ease: Power4.easeOut, }) .to("element", { delay: 5, opacity: 0, y: "-100vh", duration: 1.5, ease: Power4.easeOut, }) Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 12, 2022 Solution Share Posted October 12, 2022 Hi, GSAP timeline instances have an addPause() method that should be exactly what you're looking for: const tl = gsap.timeline() .to("element", { delay: -1, opacity: 1, y: "0", duration: 1.5, ease: Power4.easeOut, }) .addPause() .to("element", { delay: 5, opacity: 0, y: "-100vh", duration: 1.5, ease: Power4.easeOut, }); const button = document.getElementById("button"); button.addEventListener("click", () => { tl.play(); }); https://greensock.com/docs/v3/GSAP/Timeline/addPause() Let us know if you have other questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Jloafs Posted October 12, 2022 Author Share Posted October 12, 2022 Brilliant - thanks. For some reason I was missing the 'add' in 'addPause' when playing with this. 1 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