Animations

Any widget, and any whole section, can play an entrance animation. You set it under Motion in the inspector; the document stores it as animation, the renderer writes it as data-gsy-* attributes, and a small runtime bundled in the binary plays it in the browser. The server never writes script for a single widget.

Settings

Setting	Values
preset	fade-in (default), fade-up, fade-down, fade-left, fade-right, zoom-in, slide-up
duration_ms	length in milliseconds; default 600, the builder's slider runs from 100 to 2000
delay_ms	wait before starting, in milliseconds; default 0, the slider runs to 1500
ease	ease-out (default), ease-in, ease-in-out, linear, back, elastic, bounce
scroll_trigger	absent: play when the page loads. Present: wait until the element scrolls into view

The directional fades also travel 24px in the direction they name, so fade-up rises from 24px below; zoom-in grows from 92%; slide-up rises 40px without fading. Staggering is a matter of delays: give three cards delays of 0, 150 and 300.

Scroll triggers

"Play on scroll into view" adds a scroll_trigger:

scroll_trigger	Values
start	where in the window the element's top edge must reach, from 0 (top) to 1 (bottom); default 0.85. The builder's Trigger point slider runs from 30% to 100%
once	default true (Play once)
scrub	true ties the animation's progress to the scroll position instead of playing it on entry; set in the document, not in the builder

"animation": { "preset": "fade-up", "duration_ms": 800, "delay_ms": 150, "ease": "back",
               "scroll_trigger": { "start": 0.9, "once": true } }

Seeing them

In Edit mode animated elements are always shown, so nothing disappears while you work. Press "Play on the canvas" under Motion, or switch the canvas to Preview, to watch them play.

How the runtime loads

A page loads the animation runtime and its library only when the page, or the header or footer around it, has at least one animation; the scroll part is added only when something uses a scroll trigger. All of it is served from the site's own domain under /_gansey/assets/.

Animated elements start transparent and the runtime reveals them. When a visitor has asked their system for reduced motion, or the library cannot load, everything is simply shown without movement. Because the reveal needs the script, a browser with scripts switched off does not show animated elements; keep animations for things the page can do without.

Presets from modules

The preset name is open-ended: a document may name a preset the runtime does not ship, and an unknown name plays as fade-in. A module can add presets by defining window.GanseyAnimate.presets before the runtime runs (for example from a script it adds through the head hook). Each preset is the set of values the element starts from:

window.GanseyAnimate = { presets: { "rise-in": { from: { opacity: 0, scale: 0.96, y: 48 } } } };

The builder's Preset list shows the seven built-in presets.