Animations that convert

// Animate FROM current state TO new values
gsap.to(".element", {
  x: 200,
  rotation: 360,
  scale: 1.3,
  duration: 1.2,
  ease: "elastic.out(1, 0.5)"
});

// Elements fly in FROM off-screen
gsap.from(".pricing-card", {
  y: 80,
  opacity: 0,
  scale: 0.8,
  stagger: 0.15,
  duration: 0.7,
  ease: "back.out(1.7)"
});

// Chain animations into a sequence
const tl = gsap.timeline();
tl.to("#red", { x: 120, rotation: 180, duration: 0.6 })
  .to("#purple", { y: -60, scale: 1.3 }, "-=0.2")
  .to("#blue", { x: -120, borderRadius: "50%" }, "-=0.2");

// Same destination, different feel
gsap.to("#linear", { x: 400, duration: 2, ease: "linear" });
gsap.to("#power",  { x: 400, duration: 2, ease: "power2.out" });
gsap.to("#elastic",{ x: 400, duration: 2, ease: "elastic.out(1,.5)" });
gsap.to("#expo",   { x: 400, duration: 2, ease: "expo.out" });

gsap.from(".tool-card", {
  scale: 0, opacity: 0,
  stagger: { amount: 0.6, grid: "auto", from: "center" },
  duration: 0.5, ease: "back.out(1.7)"
});

// Smooth count-up with GSAP snap
const obj = { val: 0 };
gsap.to(obj, {
  val: 2847, duration: 1.5,
  snap: { val: 1 },
  onUpdate: () => el.textContent = Math.floor(obj.val).toLocaleString()
});

// SVG circle animation
const circ = 2 * Math.PI * 70;
gsap.to("#ring", {
  strokeDashoffset: circ - (percent/100) * circ,
  duration: 1.5, ease: "power2.out"
});

// Confetti explosion on click
for (let i = 0; i < 50; i++) {
  const p = document.createElement("div");
  // random size, color, shape
  gsap.to(p, {
    x: (Math.random()-.5)*500,
    y: (Math.random()-.5)*400,
    rotation: Math.random()*720,
    opacity: 0, duration: 1
  });
}

// Random chars → real text letter by letter
// 30ms interval, iteration speed 0.5

// Type → pause → delete → next phrase

// Pure CSS spinning border
@property --angle { syntax: ''; }
background: conic-gradient(from var(--angle), ...);
animation: spin 3s linear infinite;

// Pure CSS neon pulse
@keyframes neon {
  50% { box-shadow: 0 0 40px #00d4ff44, 0 0 80px #00d4ff22; }
}

// 3D tilt following mouse
gsap.to(card, {
  rotateY: x * 30, rotateX: -y * 30,
  transformPerspective: 800
});

// SVG path morph
<animate attributeName="d" dur="8s"
  values="path1;path2;path1" />

// Color shifts green→yellow→red

// Gentle levitation
gsap.to(el, { y: -20, repeat: -1, yoyo: true });

// Color-cycling gradient text

// Ripple from click point

// Breathing / pulse indicator

// Spawn particles at cursor