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?