motly

GSAP, Motion and anime.js animate elements that already exist. motly generates the thing being animated: you describe a burst as a JSON Spec, and motly generates the shapes and draws them.

With @motly/gsap, a burst is an ordinary GSAP tween. It sits in a timeline, scrubs, reverses, repeats, is driven by ScrollTrigger and is cleaned up by gsap.context() and useGSAP.

Replay

JavaScript

import { Motly, rand } from '@motly/gsap';
import { gsap } from 'gsap';

gsap.registerPlugin(Motly);

const spec = {
  kind: 'burst',
  count: 12,
  radius: [0, 90],
  restAt: 0.4,
  children: { kind: 'circle', radius: [rand(4, 9), 0], fill: 'deeppink', duration: 0.8 },
};

const button = document.querySelector('button');
button.addEventListener('click', () => gsap.effects.burst(button, { spec }));

// Or in a timeline, placed with GSAP's position parameter. This one plays as the page loads:
gsap
  .timeline()
  .to(button, { scale: 0.9, yoyo: true, repeat: 1, duration: 0.1 })
  .burst(button, { spec }, '<');

HTML

<button type="button">Burst</button>

<style>
  button {
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: deeppink;
    color: white;
    font: 600 1rem system-ui, sans-serif;
    cursor: pointer;
  }
</style>

Start with GSAPnpm install @motly/gsap gsap

Start without GSAPnpm install @motly/core