AlexN Posted March 15, 2021 Share Posted March 15, 2021 Hi All! First of all I want to say Thanks for the magnificent product for animation. It saves so much time which we can spend on family :) I will be appropriate for your help in beautifying my code, if it is possible. I'm just start using GSAP and don't know if my code is optimized and pretty enough. But it works! const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 }); gsap.to(".path", 50, { strokeDashoffset: -1000, ease: 'none', repeat: -1, }); gsap.set(".plane", { xPercent: -50, yPercent: -50, transformOrigin: '50% 50%', scale: 0.7, autoAlpha: 0, }); tl.to(".plane", { duration: 1, autoAlpha: 1, }) .to(".plane", { duration: 7, ease: 'none', motionPath: { align: ".path", path: ".path", autoRotate: true, curviness: 0.5, }, }, '-=1' ) .to(".plane", { duration: 3, scale: 0 }, '-=2') .to(".pin", { duration: 1, scale: 1.1, skewX: -10, rotate: 20, transformOrigin: '50% 100%', }, '-=2' ) .to(".pin", { duration: 1.5, scale: 1, skewX: 0, rotate: 0, transformOrigin: '50% 100%', ease: 'elastic.out(1.5, 0.2)', }, '-=1' ); How it looks? Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 15, 2021 Share Posted March 15, 2021 Everything looks pretty good to me! Personal preference: I break and indent the first .to in the tl.to: const tl = gsap.timeline(); ... tl .to(".plane", { duration: 1, autoAlpha: 1, }) .to(...); Note: this will not change anything from a performance standpoint, just readability. Happy tweening! You could also just do: gsap.timeline({...}) .to('.el', {...}) .to(...); 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 15, 2021 Share Posted March 15, 2021 Hey Alex and welcome to the GreenSock forums. We also recommend using the duration property inside of the vars instead of using the duration parameter. 2 Link to comment Share on other sites More sharing options...
AlexN Posted March 15, 2021 Author Share Posted March 15, 2021 Thank you for the answers ! Should I close, or delete a topic somehow? Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 15, 2021 Solution Share Posted March 15, 2021 You could click the "Mark as solution" button that's in the bottom of each post, but you don't have to do that. Link to comment Share on other sites More sharing options...
PointC Posted March 15, 2021 Share Posted March 15, 2021 7 minutes ago, AlexN said: Should I close, or delete a topic somehow? You usually buy a pizza for anyone who gave you an answer. 🍕 Click the "Mark As Solution" and you're good to go. Happy tweening. 1 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