How does the cursor-following glow effect work in GSAP?

The .glow div is a large radial-gradient circle (350px, purple center fading to transparent) that sits inside the button with opacity: 0 and pointer-events: none. In the mousemove handler, glow.style.left = mouseX + 'px' and glow.style.top = mouseY + 'px' instantly move it to cursor coordinates. gsap.to(glow, {opacity: 1, duration: 0.25}) fades it in as you enter. On mouseleave, gsap.to(glow, {opacity: 0, duration: 0.4}) fades it out. The glow follows instantly because top/left updates are direct style changes, while opacity eases smoothly.

How does the GSAP shine sweep work on hover?

The .shine div is a rotated white gradient element positioned off-screen at x: -350 (using GSAP's x transform, equivalent to translateX). On mouseenter, gsap.fromTo(shine, {x: -350}, {x: 400, duration: 1.5, ease: 'power2.inOut'}) animates it from -350px to +400px, sweeping the diagonal white gradient across the button in 1.5 seconds. This is better than CSS because GSAP's ease: 'power2.inOut' creates a natural acceleration and deceleration, and the animation re-triggers cleanly on each hover.

What is the aura ring effect and how is it built?

The .aura-ring div is a 280×280px circle with border-radius: 50% and a conic-gradient background cycling through purple, pink, and blue with low opacity rgba values. A heavy filter: blur(50px) spreads the colors into a soft glow cloud behind the button. The @keyframes spin animation rotates it 360deg over 7 seconds continuously. Since it uses z-index: -2, it appears behind the button, creating an ambient glowing aurora effect that signals the button's premium nature.

GSAP Button with 3D Tilt, Glow, and Particle Burst

⚡ All 7 GSAP Effects — Deep Dive

Every GSAP call, CSS property, and math formula behind the Ultimate Stylish GSAP Button.

① GSAP mousemove

3D Tilt

Cursor offset from button center divided by 6 gives tilt angle. GSAP applies rotationX and rotationY simultaneously with power3.out for smooth real-time tracking. transform-style: preserve-3d on the button enables the perspective effect.

const tiltX = (mouseY - cy) / 6;
const tiltY = (cx - mouseX) / 6;
gsap.to(btn, {rotationX:-tiltX, rotationY:tiltY,
duration:0.7, ease:'power3.out'})

② GSAP mousemove

Magnetic Pull

The button physically moves toward the cursor by multiplying the offset from center by 0.17 to give a subtle magnetic feel. Reset to x:0, y:0 on mouseleave. Combined with 3D tilt on the same gsap.to call for maximum efficiency.

const pullX = (mouseX - cx) * 0.17;
const pullY = (mouseY - cy) * 0.17;
gsap.to(btn, {x:pullX, y:pullY,
duration:0.7, ease:'power3.out'})

③ GSAP mousemove

Cursor Glow Follow

The .glow div (350px radial-gradient circle) tracks the cursor by direct style.left/top property assignment in the mousemove handler for zero-latency position update. GSAP handles only the opacity fade-in (0.25s) and fade-out (0.4s) on enter/leave.

glow.style.left = mouseX + 'px';
glow.style.top = mouseY + 'px';
gsap.to(glow, {opacity:1, duration:0.25})
// mouseleave: opacity→0

④ GSAP mouseenter

Shine Sweep

gsap.fromTo gives explicit start and end positions. The .shine div begins at x:-350 (off left edge) and animates to x:400 (off right edge) in 1.5s with power2.inOut easing for natural acceleration. scale: 1.18 and enhanced box-shadow also fire on mouseenter via a separate gsap.to.

gsap.fromTo(shine,
{x: -350},
{x: 400, duration:1.5, ease:'power2.inOut'})

⑤ CSS + JS

Ripple Effect

On click, a div is created sized 2× the larger of button width/height, centered at mouseX/mouseY. CSS @keyframes ripple animates it from scale(0) to scale(3.5) with opacity fading to 0 in 0.6s. JavaScript removes it with setTimeout after 600ms to keep the DOM clean.

ripple.style.width = size + 'px';
ripple.style.left = mouseX - size/2 + 'px';
// CSS: animation: ripple .6s ease-out
setTimeout(() => ripple.remove(), 600)

⑥ GSAP click

Particle Burst (×15)

15 .particle divs created per click, each assigned a random color from an array. gsap.utils.random(-130,130) for x, (-180,-100) for y (upward only), and (-720,720) for rotation. opacity animates to 0 over 1.5s with power2.out. onComplete callback removes each particle from the DOM.

gsap.to(p, {
x: gsap.utils.random(-130, 130),
y: gsap.utils.random(-180, -100),
rotation: gsap.utils.random(-720, 720),
opacity: 0, duration: 1.5,
onComplete: () => p.remove() })

⑦ CSS + Audio

Aura Ring + Click Sound

The .aura-ring uses a conic-gradient cycling through purple, pink, and blue at low opacity, with filter: blur(50px) to spread colors into a soft ambient glow. @keyframes spin rotates 360deg over 7s linear infinite. Audio plays via HTMLAudioElement.play() with .catch() to handle autoplay policy silently.

animation: spin 7s linear infinite;
/* spin: 0%→100% { transform: rotate(360deg) } */
sound.currentTime = 0;
sound.play().catch(() => {})

⚡ Full Source Code

// index.html — Ultimate Stylish GSAP Button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ultimate Stylish GSAP Button</title>

  <!-- GSAP 3.12.5 + MotionPathPlugin (for gsap.utils) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/MotionPathPlugin.min.js"></script>

  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Rotating aurora background ring -->
  <div class="aura-ring"></div>

  <!-- Main button -->
  <button class="ultimate-btn" id="ultimateBtn">
    <span>Awaken</span>
    <div class="shine"></div>         <!-- Shine sweep element -->
    <div class="glow" id="glow"></div> <!-- Cursor-follow glow -->
  </button>

  <!-- Click sound (replace src with your own audio) -->
  <audio id="clickSound" src="https://assets.codepen.io/605876/click-blip.mp3"></audio>

  <script src="script.js"></script>
</body>
</html>

// style.css — Ultimate Stylish GSAP Button

/* Deep space background */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #100021, #000);
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

/* ── Rotating Aura Ring ─────────────────────────────── */
.aura-ring {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(180,100,255,0.3),
    rgba(255,70,180,0.35),
    rgba(100,180,255,0.35),
    rgba(180,100,255,0.3)
  );
  filter: blur(50px);
  opacity: 0.22;
  animation: spin 7s linear infinite;
  z-index: -2;
}
@keyframes spin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* ── Ultimate Button — Glassmorphism ─────────────────── */
.ultimate-btn {
  position: relative;
  padding: 24px 60px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  border: none;
  border-radius: 80px;
  overflow: hidden;

  /* Glassmorphism */
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(14px);
  border: 2px solid rgba(255,255,255,0.2);

  /* Multi-layer purple glow box-shadow */
  box-shadow:
    0 0 35px rgba(180,100,255,.5),
    0 0 90px rgba(180,100,255,.2),
    inset 0 0 25px rgba(255,255,255,.08);

  /* Enables 3D child transforms */
  transform-style: preserve-3d;
  transition: transform .15s ease;
}
.ultimate-btn span {
  position: relative;
  z-index: 10; /* above shine and glow */
}

/* ── Shine Sweep element ─────────────────────────────── */
/* GSAP animates x from -350 to +400 on mouseenter */
.shine {
  position: absolute;
  top: -120%; left: -120%;
  width: 80%; height: 300%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  );
  transform: rotate(25deg);
}

/* ── Cursor-Following Glow ───────────────────────────── */
/* Position updated via JS style.left/top */
.glow {
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(180,100,255,0.45) 0%,
    rgba(0,0,0,0) 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  filter: blur(6px);
}

/* ── Ripple Effect ───────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transform: scale(0);
  animation: ripple .6s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(3.5); opacity: 0; }
}

/* ── Particle ────────────────────────────────────────── */
/* GSAP handles x/y/rotation/opacity — CSS only needs position */
.particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

// script.js — Ultimate Stylish GSAP Button

const btn   = document.getElementById('ultimateBtn');
const glow  = document.getElementById('glow');
const shine = btn.querySelector('.shine');
const sound = document.getElementById('clickSound');

let mouseX = 0, mouseY = 0; // track relative to button

// ── mousemove: 3D Tilt + Magnetic Pull + Glow Follow ──
btn.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;

  const cx = rect.width  / 2;
  const cy = rect.height / 2;

  // 3D tilt — divide by 6 to control intensity
  const tiltX = (mouseY - cy) / 6;
  const tiltY = (cx - mouseX) / 6;

  // Magnetic pull — move button toward cursor (17% of offset)
  const pullX = (mouseX - cx) * 0.17;
  const pullY = (mouseY - cy) * 0.17;

  gsap.to(btn, {
    x: pullX, y: pullY,
    rotationX: -tiltX, rotationY: tiltY,
    duration: 0.7, ease: 'power3.out'
  });

  // Glow follows cursor — direct style for zero latency
  glow.style.left = mouseX + 'px';
  glow.style.top  = mouseY + 'px';
  gsap.to(glow, { opacity: 1, duration: 0.25 });
});

// ── mouseenter: Scale Up + Shine Sweep ────────────────
btn.addEventListener('mouseenter', () => {
  gsap.to(btn, {
    scale: 1.18,
    boxShadow: '0 0 50px rgba(180,100,255,.8), 0 0 110px rgba(180,100,255,.25)',
    duration: 0.35, ease: 'back.out(1.6)'
  });
  // Shine sweeps left-to-right across the button
  gsap.fromTo(shine, { x: -350 }, { x: 400, duration: 1.5, ease: 'power2.inOut' });
});

// ── mouseleave: Reset All ─────────────────────────────
btn.addEventListener('mouseleave', () => {
  gsap.to(btn, {
    scale: 1, x: 0, y: 0, rotationX: 0, rotationY: 0,
    boxShadow: '0 0 35px rgba(180,100,255,.5), 0 0 90px rgba(180,100,255,.2)',
    duration: 0.7, ease: 'power3.out'
  });
  gsap.to(glow, { opacity: 0, duration: 0.4 });
});

// ── click: Ripple + Particles + Scale Feedback + Sound ─
btn.addEventListener('click', (e) => {
  const rect = btn.getBoundingClientRect();

  // ── Ripple ──
  const ripple = document.createElement('div');
  const size = Math.max(rect.width, rect.height) * 2;
  ripple.classList.add('ripple');
  ripple.style.width  = ripple.style.height = size + 'px';
  ripple.style.left   = mouseX - size / 2 + 'px';
  ripple.style.top    = mouseY - size / 2 + 'px';
  btn.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);

  // ── Particle Burst (15 particles) ──
  const colors = ['#ff77dd', '#7f6eff', '#66d4ff', '#ffd166'];
  for (let i = 0; i < 15; i++) {
    const p = document.createElement('div');
    p.classList.add('particle');
    p.style.background = colors[Math.floor(Math.random() * colors.length)];
    p.style.left = mouseX + 'px';
    p.style.top  = mouseY + 'px';
    btn.appendChild(p);

    gsap.to(p, {
      x:        gsap.utils.random(-130, 130),   // spread horizontally
      y:        gsap.utils.random(-180, -100),   // always go upward
      rotation: gsap.utils.random(-720, 720),    // spin randomly
      opacity:  0,
      duration: 1.5,
      ease:     'power2.out',
      onComplete: () => p.remove()               // clean DOM
    });
  }

  // ── Scale feedback (yoyo: press and release) ──
  gsap.to(btn, { scale: 0.9, duration: 0.1, yoyo: true, repeat: 1 });

  // ── Click sound (fails silently if autoplay blocked) ──
  sound.currentTime = 0;
  sound.play().catch(() => {});
});

// gsap_button_faq

GSAP Button — FAQ

How the 3D tilt, magnetic pull, glow follow, particle burst, and GSAP ease functions work.

How does the GSAP 3D tilt and magnetic button effect work?

On mousemove, getBoundingClientRect() gives the button's position. Subtracting the button center from cursor position gives the offset. Dividing by 6 controls tilt intensity: tiltX = (mouseY - cy) / 6, tiltY = (cx - mouseX) / 6. Multiplying offset by 0.17 gives the magnetic pull distance. gsap.to applies rotationX, rotationY, x, y simultaneously at duration 0.7s with power3.out. transform-style: preserve-3d on the button CSS enables the 3D perspective effect.

How does the cursor-following glow effect work?

The .glow div is a 350×350px radial-gradient circle inside the button at opacity 0 and pointer-events: none. In the mousemove handler, glow.style.left = mouseX + 'px' and glow.style.top = mouseY + 'px' update position instantly without any animation (direct style change = no latency). GSAP handles only the opacity fade-in (0.25s on enter) and fade-out (0.4s on leave), so the light appears to illuminate exactly where the cursor is while smoothly appearing and disappearing at the button boundary.

How does the GSAP shine sweep work?

The .shine div is a diagonal white gradient positioned off-screen to the left. gsap.fromTo(shine, {x: -350}, {x: 400, duration: 1.5, ease: 'power2.inOut'}) gives explicit start and end positions — more reliable than gsap.to alone since it guarantees the element starts at -350 regardless of interruption. power2.inOut provides natural acceleration and deceleration. The button's overflow: hidden clips the shine to the button area, so only the crossing portion is visible as the sweeping highlight.

How does the GSAP particle burst on click work?

On click, a loop runs 15 times. Each iteration creates a .particle div, assigns a random color from the array, positions it at mouseX/mouseY. gsap.to animates x to gsap.utils.random(-130, 130) for horizontal spread, y to gsap.utils.random(-180, -100) forcing upward movement, and rotation to gsap.utils.random(-720, 720) for multi-spin. opacity fades to 0 over 1.5s with power2.out. The onComplete callback removes each particle from the DOM to prevent memory buildup after repeated clicks.

What is the aura ring and how is it built?

The .aura-ring is a 280×280px absolutely-positioned div with border-radius: 50% and a conic-gradient cycling through purple, pink, and electric blue at low opacity (0.3–0.35 rgba). filter: blur(50px) spreads the colors into a soft diffused glow cloud. @keyframes spin rotates it 0→360deg over 7 seconds with linear timing and infinite repetition. z-index: -2 places it behind the button. The result is an ambient aurora that signals the button's interactivity without being distracting.

How does GSAP differ from CSS animations for button interactions?

CSS animations excel for repeating loops (the aura spin) and simple hover transitions. GSAP is better for real-time interactions because: (1) back.out(1.6) provides a physical spring overshoot on scale that CSS lacks, (2) power3.out gives precise control over deceleration curves, (3) GSAP handles mid-animation interruption cleanly — mouseleave mid-hover properly reverses without a jump, (4) gsap.utils.random provides a clean API for dynamic values, and (5) chaining multiple properties (x, y, rotationX, rotationY, scale, boxShadow) in one call is much cleaner than CSS transitions.

⚡ All 7 GSAP Effects — Deep Dive

GSAP Button — FAQ

Master GSAP & JavaScript.Build Futuristic UIs.

Master GSAP & JavaScript.
Build Futuristic UIs.