Skip to registry

ShineSky · internal reference

Motion Registry

Eleven GSAP behaviour specimens. Each entry states its behaviour contract in plain language, runs on a self-authored abstract fixture, and exposes explicit Init, Replay and Destroy controls so lifecycle cleanup is observable rather than assumed.

Release channel
internal-preview
Engine
GSAP 3.15.0
Fixtures
self-authored geometry (internal_placeholder)

SVG-01

transformOrigin parity between SVG and DOM

One timeline drives an SVG rect and a plain div through the same four origin values, so origin semantics can be compared across both rendering models.

  • Origin steps: 50% 50%, right bottom, 0px 0px, 100% 0%.
  • Both targets receive identical tween vars; only the renderer differs.
  • Static state parks both nodes at rotation 0 with the first origin.

DOM element, same tween vars

transformOrigin: 50% 50%

SVG-02

smoothOrigin removes the origin-change jump

Two identical shapes rotate by the same amount around a changed origin. The left one uses smoothOrigin: true; the right one keeps the spec-accurate jump.

  • Each pass shifts transformOrigin, then rotates +=90.
  • Origin cycle: 50% 50% → right bottom → 0% 100%.
  • Only the smoothOrigin flag differs between the two targets.
smoothOrigin true false

transformOrigin: 50% 50%

SVG-03

svgOrigin: rotate around any canvas point

Parts at different positions and sizes rotate either around one shared SVG canvas point or around their own centres. The shared point is drawn as a visible marker.

  • svgOrigin takes canvas pixel coordinates only, never percentages.
  • Shared point for this fixture: 150 100.
  • Mode buttons are native and expose aria-pressed.

Mode: shared canvas point 150 100

SVG-04

CSS transforms alongside AttrPlugin attributes

CSSPlugin drives position, scale and stroke width. AttrPlugin drives the native cx, r and rx attributes on the same canvas.

  • Timeline uses repeat: 1, yoyo: true, repeatDelay: 0.5.
  • AttrPlugin does not convert units, so start and end units must match.
  • Static state shows the completed attribute values.

CSS layer: transform + stroke · Attr layer: cx / r / rx

SVG-05

xPercent moves each element by its own width

Four bars of different widths each travel 100% of their own width, so no per-node pixel maths is needed.

  • xPercent: 100 resolves against each target's own box.
  • Stagger 0.4 with repeat: 1 and yoyo: true.
  • Static state returns every bar to xPercent: 0.

xPercent: 100 · stagger 0.4 · repeat 1 · yoyo

SVG-06

Draggable SVG with bounds and inertia

The square drags freely inside the bounds rectangle. The dial is a rotation Draggable. Both use InertiaPlugin, and every instance is killed on Destroy.

  • Types: x,y with bounds, and rotation.
  • Touch and mouse are both supported; native touch scrolling is disabled on the drag target.
  • Reduced motion skips build entirely, so no drag listener or inertia exists in that state.

Draggable + InertiaPlugin · static (drag disabled)

SVG-07

Move anything along a path with auto-rotation

The rider follows the curve, aligns to it and auto-rotates. It runs once per Init or Replay rather than holding a permanent loop.

  • motionPath with align, autoRotate and alignOrigin: [0.5, 0.5].
  • Duration 5s, power1.inOut, single pass.
  • Static state parks the rider at the end of the path.

motionPath · align + autoRotate · one pass per replay

SVG-08

DrawSVG stroke reveal handing off to fill

Outline strokes draw in with a stagger, the filled layer then fades up, and the guide strokes are hidden so no half-drawn artwork is left behind.

  • Strokes tween drawSVG from 0 to 100%, staggered by 0.12.
  • The fill layer only appears after the outline completes.
  • Static state is the finished solid shape with guides hidden.

drawSVG 0 → 100% · then fill autoAlpha

SVG-09

drawSVG visible-segment value forms

Stepping through the accepted value forms shows how the start and end of the visible stroke segment are expressed. The active value is printed under the fixture.

  • Cycle: 100%, 40% 60%, 20 350, 50% 50%, true, 10%.
  • Percentages are relative to total stroke length; bare numbers are user units.
  • Static state is the fully drawn stroke at 100%.

drawSVG: 100%

SVG-10

MorphSVG across differing point counts

One visible path morphs through a triangle, a pentagon and a curved blob, then returns to its authored base square. The plugin reconciles the differing point counts.

  • Targets: triangle (3 points), pentagon (5 points), blob (cubic curves).
  • Target paths live in a hidden group and are never rendered directly.
  • Destroy restores the base d attribute exactly.

Active shape: base square

idle

Reference: MorphSVGPlugin · the historical CodePen for this entry returns 404, so the official plugin demo is the live reference.

Study 11

Cinematic scroll study · authored geometry, no video

A pinned ScrollTrigger timeline scrubs self-authored SVG and CSS geometry. There is no video element, poster frame, image sequence or external media: depth comes from layered strata and a drawn horizon.

  • Pinned scrub with scrub: 0.6 and invalidateOnRefresh.
  • Nearer strata travel further than far ones, which reads as camera push.
  • Chapter copy is real markup and stays readable with motion off or JS absent.

1 / 3 · approach

Approach

The camera settles. Far strata hold still while the horizon draws outward from the centre.

Push

Near strata travel further than far ones. The parallax difference is what reads as depth.

Settle

Scrub resolves into the composed final frame, which is also the static and reduced-motion state.