motion

shared snapshots keep moving: spinners spin, loops loop, entrances rest where they ended.

what keeps moving#

a snapshot is captured on one frame, with animations held while it's taken. a share link then moves where the page did:

• looping css animations (animation-iteration-count: infinite, on elements and ::before / ::after) run on from the frame they were captured at.
• one-shot animations (entrance fades and slides) stay at their end, so nothing replays or flashes empty on load.
• looping web animations (element.animate()) are carried as css.

script-driven motion#

motion driven by script (a requestAnimationFrame loop, gsap and the like) is watched for. if anything in or above the element changes over two frames, the moving elements are read every frame for 1.7 seconds and what's found becomes generated @keyframes, never script:

• a steady rotation becomes an endless turn at the measured speed,
• a repeating motion becomes a loop of one period,
• other smooth motion plays back and forth,
• an entrance that comes to rest is held where it ended.

random or jittery motion is left as captured. rebuilt motion is an approximation of the real thing. at most 40 moving elements and 20 KB of generated css are kept.

timing#

a page where nothing moves gets the same snapshot as before, at most two frames later. with script motion, a share takes up to about two seconds longer.

turning it off#

• viewers with prefers-reduced-motion: reduce see everything still.
• el share --no-motion shares one link without motion.
• el snapshot --motion keeps motion in a local snapshot (local snapshots don't by default).