Skip to content
motly

Start with GSAP

@motly/gsap puts motly’s bursts in GSAP. gsap.effects.burst(button, { spec }) returns an ordinary tween, so a burst sits in a timeline, scrubs, reverses, repeats, is driven by ScrollTrigger and is cleaned up by gsap.context() and useGSAP.

Install

Section titled “Install”

With a bundler:

Terminal window
npm install @motly/gsap gsap
import { gsap } from 'gsap';
import { Motly } from '@motly/gsap';


gsap.registerPlugin(Motly);

Importing registers nothing; registerPlugin does.

With script tags, as on CodePen, load GSAP first. The script build then registers itself and makes Motly a global:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@motly/gsap@0.1"></script>

Loaded before GSAP, it only defines Motly; call gsap.registerPlugin(Motly) yourself. With script tags there are no imports, so rand, each and the named curves are Motly.rand, Motly.each and so on.

A first burst

Section titled “A first burst”

Click the button, or press Replay to see the timeline version that plays as the page loads.

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 }, '<');

spec is the whole burst: plain JSON, so a Spec exported from an editor is passed as it is.

  • kind: 'burst' makes an Emitter: count Children, spread evenly around a circle.
  • An array is Keyframes: radius: [0, 90] moves the Children from the centre out to 90 pixels.
  • rand(4, 9) is a Descriptor. It stays JSON, and each Child resolves it to its own number.
  • restAt: 0.4 is the Resting frame, which a viewer who prefers reduced motion sees instead of the motion.

tl.burst(button, { spec }, '<') is the same effect placed in a timeline with GSAP’s position parameter.

A single shape

Section titled “A single shape”

gsap.effects.shape() and tl.shape() draw one Element instead of a burst, from a Shape’s Spec:

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


gsap.registerPlugin(Motly);


// One Element, not a burst: gsap.effects.shape takes a Shape's Spec.
const spec = {
  kind: 'star',
  points: 5,
  radius: [0, 70],
  angle: [0, 144],
  fill: 'none',
  stroke: 'gold',
  strokeWidth: [8, 0],
  duration: 0.7,
  restAt: 0.5,
};


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

Next

Section titled “Next”
  • Using motly with GSAP: which vars keys are GSAP’s and which are motly’s, where a burst comes from and where it is painted, cleanup and reduced motion.