customAnims

Your own animations plug into the same registry as the built-ins. Push an entry with a selector, an optional hidden from state, and a play(el, delay, dur, ease) callback returning a GSAP tween or timeline.

import { customAnims } from 'gclass-anims'
import { gsap } from 'gsap'

customAnims.push({
  sel: '.whirl',
  from: { opacity: 0, rotation: 90, scale: 0.7 },
  play: (el, delay, dur, ease) =>
    gsap.fromTo(el,
      { opacity: 0, rotation: 90, scale: 0.7 },
      { rotation: 0, scale: 1, opacity: 1, duration: dur, delay, ease }),
})

What you get for free

Because the entry lives in the same registry, .whirl instantly supports .time-N, .ease-*, .order/.priority-N, .scroll, .appear, .leave reversal and a .spawn-text-whirl variant. Both examples below ship inside the package as reference implementations.

Live demo

Provide from if you want leave-reversal and scroll reversal to look right - it is the state the engine returns the element to. Loop-style entries use a build(el, ctx) callback plus a storage key instead of play.

Use named import import { gsap } from 'gsap' for correct CJS interop with require('gsap').gsap (fixed beta.22: Animations.js:2, Listeners.js:1, AnimToggle.js:3). Runtime customAnims.push() is picked up on the next initAnimations() or initListeners() call - Listeners.js:177 normalize(customAnims) re-normalizes inside initListeners (beta.22), so you can push before a re-init.