A smooth looping animation with morphing rounded shapes and staggered dots orchestrated on a GSAP timeline
Animation Details
This loading sequence uses GSAP (GreenSock Animation Platform) to create a smooth, looping animation with:
- Three morphing rounded shapes with gradient backgrounds
- Staggered row of pulsing dots with offset timing
- Custom easing curves for smooth transitions
- Infinite looping timeline with yoyo effects
- Interactive controls for playback control
// GSAP Timeline creation
const tl = gsap.timeline({
repeat: -1, // Infinite loop
yoyo: true, // Reverse animation on alternate cycles
defaults: { ease: "sine.inOut", duration: 2 }
});
// Morph shapes with borderRadius animation
tl.to(".shape-1", { borderRadius: "30% 70% 70% 30% / 30% 30% 70% 70%" }, 0)
.to(".shape-2", { borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%" }, 0.2)
.to(".shape-3", { borderRadius: "40% 60% 70% 30% / 40% 50% 50% 60%" }, 0.4);