Guillaume P. Posted November 2, 2022 Share Posted November 2, 2022 Hi Greensock Team, I would like to reverse this animation without toggle. I used : .progress(1) .reverse(); I also would like to add a delay but it doesn't work. Thank's for your help. See the Pen mdKPqxW?editors=0010 by crankup (@crankup) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 2, 2022 Share Posted November 2, 2022 Hi, Just add a dummy instance at the end of the timeline and use the position parameter: tl.current = gsap.timeline() .to(".box", { rotation: 360 }) .to(".circle", { x: 100 }) .to({}, {}, "+=1") // Delays reverse one second .progress(1) .reverse(); You can also add a dummy label or a call method to a function that does nothing. The secret ingredient here is the position parameter 👨🍳 Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Guillaume P. Posted November 3, 2022 Author Share Posted November 3, 2022 Hi Rodrigo, Thank's for delay tips ! I also would like to keep the "first animation" because, when I add .progress(1) and .reverse(), I only have the reverse animation but not the "first animation". For more clarity, I would like the first animation, then one second delay and then launch the reverse . I mean this animation with reverse after one second but without toggle to launch the reverse : See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen Thank's for your help. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 3, 2022 Share Posted November 3, 2022 Hi Guillaume, I read your post a few times and I'm having a few issues trying to grasp the concept, so please bear with me needing a few extra details. You want the animation to have a delay only when you reverse it? What happens if the animation is running when is toggled, there should be a delay as well? You still want the animation to start from the end, like in your first codepen example? You want the animation to start going forward and after it is completed, wait one second and reverse it automatically without a button or a user triggered event? Please clarify this for me in order to give you the best possible advice. Happy Tweening! Link to comment Share on other sites More sharing options...
Guillaume P. Posted November 3, 2022 Author Share Posted November 3, 2022 Hi Rodrigo, You want the animation to have a delay only when you reverse it ? ==> Yes What happens if the animation is running when is toggled, there should be a delay as well ? ==> No more toggle button You still want the animation to start from the end, like in your first codepen example ? ==> No You want the animation to start going forward and after it is completed, wait one second and reverse it automatically without a button or a user triggered event ? ==> Yes exactly .. this is it ! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted November 3, 2022 Solution Share Posted November 3, 2022 Hi Guillaume, There are two simple ways to do that using an onComplete callback in your GSAP Timeline. One is to use a GSAP DelayedCall in order to reverse the timeline one second after is completed: useLayoutEffect(() => { const ctx = gsap.context(() => { tl.current && tl.current.progress(0).kill(); tl.current = gsap.timeline({ onComplete() { // Reverse the timeline one second after is completed gsap.delayedCall(1, () => this.reverse()); } }) .to(".box", { rotation: 360 }) .to(".circle", { x: 100 }); }, app); return () => ctx.revert(); }, []); Another is to add the dummy instance at the end (as mentioned in my first post) and then just call the reverse method using the onComplete callback, no need for Delayed Call in this scenario: useLayoutEffect(() => { const ctx = gsap.context(() => { tl.current && tl.current.progress(0).kill(); tl.current = gsap.timeline({ // Reverse the timeline once is completed onComplete() { this.reverse(); }, }) .to(".box", { rotation: 360 }) .to(".circle", { x: 100 }) .to({},{}, "+=1"); // Add extra time at the end }, app); return () => ctx.revert(); }, []); Yet a third option is to add a repeat and repeat delay to the timeline, with yoyo true: useLayoutEffect(() => { const ctx = gsap.context(() => { // add a box and circle animation to our timeline and play on first render console.log("creating timeline"); tl.current && tl.current.progress(0).kill(); tl.current = gsap.timeline({ // Repeat the timeline only once repeat: 1, // Wait for one second before repeat repeatDelay: 1, // Repeat from the end to the start (go backwards) yoyo: true, }) .to(".box", { rotation: 360 }) .to(".circle", { x: 100 }); }, app); return () => ctx.revert(); }, []); As you can see GSAP's API is insanely flexible and you have several options. Just pick the one that better fits your need and go for it. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Guillaume P. Posted November 4, 2022 Author Share Posted November 4, 2022 Thank's Rodrigo ! 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