GSAP Sparkle Generate Button

This GSAP Sparkle Generate Button adds a touch of magic to standard call-to-action elements. Designed for AI generation tools or creative apps, it features a sophisticated hover effect where particles (dots) spawn and float organically around the button. The animation is driven by GreenSock’s Physics2DPlugin, simulating gravity and velocity for a realistic “dust” movement.

Core Technique: GSAP Physics & Particle System

The visual richness comes from dynamically generating SVG elements and animating them with physics-based rules rather than linear paths.

1. Particle Generation

The JavaScript creates an SVG container and populates it with 40 clones of a simple circle (DOT_AMOUNT = 40).

• Random Positioning: Each dot is placed randomly within the button’s bounds (gsap.utils.random).
• The Timeline: A master GSAP timeline coordinates the movement. Each dot gets its own sub-timeline with unique parameters for rotation, scale, and physics.

2. Physics2D Simulation

Instead of defining x and y coordinates manually, the animation uses the physics2D object.

• Velocity & Gravity: Dots are given a random velocity (10 to 25) and negative gravity (-4 to -8), causing them to float upwards like magic dust.
• Angle: The angle is set to -90 (straight up), creating a rising column of sparkles.

physics2D: {
  angle: -90,
  gravity: gsap.utils.random(-4, -8),
  velocity: gsap.utils.random(10, 25),
}

Browser Support

The animation relies on SVG and JavaScript, which are widely supported.