Swirl

A Swirl is a Modifier: it wraps one Child and bends the path a Burst throws that Child along. It draws nothing and adds no time: a Swirl lasts as long as its Child. Reach for it to make a Burst’s Children wriggle outward instead of flying straight.

Field	Takes	If left out
child	the Child whose path it bends: a Shape, a Burst, or another Swirl	required
size	an angle: how far the path turns at the crest of a wave. The sideways reach grows with distance.	10
frequency	how many waves over the whole throw	1
direction	which way the first wave turns: 1 clockwise, -1 counterclockwise	1

Replay

JavaScript

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

gsap.registerPlugin(Motly);

// A Swirl bends the path of the Child it wraps; direction alternates with each([1, -1]).
const spec = {
  kind: 'burst',
  count: 10,
  radius: [0, 120],
  restAt: 0.4,
  children: {
    kind: 'swirl',
    size: 30,
    frequency: 1.5,
    direction: each([1, -1]),
    child: { kind: 'circle', radius: [8, 2], fill: '#8338ec', duration: 1.4 },
  },
};

gsap.effects.burst('.origin', { spec, repeat: -1, repeatDelay: 0.5 });

HTML

<div class="origin"></div>

each([1, -1]) on direction, as above, alternates the Children, so neighbours curl away from each other.

Where a Swirl goes

A Swirl only bends a throw, so it belongs in a Burst’s children, around the Child it bends. With no Burst around it there is no throw to bend, and its Child is drawn unchanged. For the same reason @motly/gsap has no swirl effect: a Swirl is reached through a Burst.

The waves follow the throw rather than the clock. Progress along the throw runs from 0 to 1 as the Burst’s radius eases, so the waves sit at the same places on the path whatever the Burst’s easing.