bramroos Posted October 26, 2020 Share Posted October 26, 2020 Hi all, I'm working on my new website and I'm very new to GSAP, so I 'borrowed' a very nice letter animation: codepen.io/lucasvallenet/pen/rGpmXN In the JS the ease trows up a conflict with my offcanvas handled by Foundation. Is there another way I can handle the transition in the code below so I can avoid the conflict? Any other ideas? On a side note, all works fine on my local server. On production the two just don't work together. Any help is much appreciated. const tl = gsap.timeline({ onComplete: () => tl.restart() }); const $logo = document.getElementById('logo') const duration = .6 const ease = 'expo.out' tl .to($logo, { morphSVG: "#f", duration, ease }, '+=2') .to($logo, { morphSVG: "#u", duration, ease }) .to($logo, { morphSVG: "#l", duration, ease }) .to($logo, { morphSVG: "#lr", duration, ease }) .to($logo, { morphSVG: "#s", duration, ease }) .to($logo, { morphSVG: "#t", duration, ease }) .to($logo, { morphSVG: "#o", duration, ease }) .to($logo, { morphSVG: "#r", duration, ease }) .to($logo, { morphSVG: "#y", duration, ease }) .to($logo, { morphSVG: "#logo", duration, ease }) See the Pen rGpmXN by lucasvallenet (@lucasvallenet) on CodePen Link to comment Share on other sites More sharing options...
Solution mikel Posted October 26, 2020 Solution Share Posted October 26, 2020 Hey @bramroos, Welcome to the GreenSock Forum. You could use repeat-1 and defaults Anything in the defaults object of a timeline gets inherited by its child animations when they get created, so if you find yourself setting the same ease or duration (or any value) over and over again, this can help make your code more concise. See the Pen rNLypdY?editors=1010 by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 3 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 Additionally to what mikel said, you could get even more fancy and do it all in a "single tween" using GSAP's keyframes functionality if you wanted to: See the Pen PozpEgP?editors=0010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
bramroos Posted October 26, 2020 Author Share Posted October 26, 2020 Awesome stuff, works very nicely! Hope to learn more of this Thank you very much! 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