amit95 Posted October 19, 2022 Share Posted October 19, 2022 I have a simple logo animation which executes every 5 seconds (for demo purposes). Here's how I'm trying to make the animation work: Wait 5 seconds White logo fades out and yellow logo animation executes Then the white logo fade back in 5 second timer resets Back to step 2 Repeat I'm essentially after something equivalent to reverse() See the Pen PoexoQY by amit_rai95 (@amit_rai95) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 19, 2022 Share Posted October 19, 2022 Hi, You don't need a endless loop to achieve that. You just have to add a delay (using the position parameter) to the fade out animation and add a label when the fade out animation starts. Then add a call() method at the end of the timeline that plays the timeline from the label 5 seconds after the final animation: var logoTl = gsap.timeline(); // initial state logoTl.set(".tri", { scale: 0, rotate: "0", transformOrigin: "50% 50%" }) // the animation .to(primaryLogo, { duration: 0.2, opacity: 0, ease: "power1.inOut" }, "+=5") // <- Wait 5 seconds in the first run .addLabel("fadeOut", "<")// <- Add this label when the previous animation starts .to(".tri", { duration: 0.3, opacity: 1, scale: 1, rotate: 0, ease: "power1.inOut", stagger: { amount: 0.3 } }) // Call a function that executes the play method from the label we added previously .call(() => logoTl.play("fadeOut"), null, "+=5"); Check the documentation for the call and addLabel methods: https://greensock.com/docs/v3/GSAP/Timeline/call() https://greensock.com/docs/v3/GSAP/Timeline/addLabel() Let us know if you have any question. Happy Tweening! Link to comment Share on other sites More sharing options...
amit95 Posted October 19, 2022 Author Share Posted October 19, 2022 Hi @Rodrigo, I may have explained it poorly in my question, so apologies in advance. After the yellow logo has animated in, I'm trying to reverse that animation on exit and then fade the white logo back in. So to clarify (as I missed mentioning these details previously): User lands on page and wait 5 seconds The white logo fades out and the animation for the yellow logo animation starts The yellow logo remains visible for 3 seconds The yellow logo animates out the opposite way it animated in (logoTl.reverse()) The white logo fade back in 5 second timer resets Back to step 2 Repeat Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 20, 2022 Solution Share Posted October 20, 2022 Hi, Just put everything in the timeline going forward and just repeat it. Sometimes in order to make the code look fancier and/or less verbose, we fall into the trap of complicating things too much. This seems to do what you want and I'm positive that it won't cause any major issue: var logoTl = gsap.timeline({ repeat: -1 }); // initial state gsap.set(".tri", { scale: 0, rotate: 0, transformOrigin: "50% 50%" }); logoTl .to(primaryLogo, { duration: 0.2, opacity: 0, ease: "power1.inOut" }, "+=5") .to(".tri", { duration: 0.3, opacity: 1, scale: 1, rotate: 0, ease: "power1.inOut", stagger: { amount: 0.3 } }) .to(".tri", { duration: 0.3, opacity: 0, scale: 0, rotate: 0, ease: "power1.inOut", stagger: { amount: 0.3 } }, "+=3") .to(primaryLogo, { duration: 0.2, opacity: 1, ease: "power1.inOut" }); Let us know how it works. Happy Tweening! 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