80Direction wipe

When to use

Use when the thing on screen moves and the next beat should arrive along the same line: a bar sweeping right wipes in the next world from the left edge of its path, so the cut reads as the movement continuing. A fade or a wipe against the movement reads as a second event.

The code

import { EASE } from '../../core/motion/presets.js';
// the old world's motion ends moving right; the next world is revealed by a mask edge that moves right too
const next = document.querySelector('[data-world="b"]');
next.style.clipPath = 'inset(0 100% 0 0)';
next.animate([{ clipPath: 'inset(0 100% 0 0)' }, { clipPath: 'inset(0 0% 0 0)' }],
  { delay: 2000, duration: 450, easing: EASE.carry, fill: 'both' });
// the leading edge carries a thin line of the accent so the eye sees what moved
edge.animate([{ left: '0%' }, { left: '100%' }], { delay: 2000, duration: 450, easing: EASE.carry, fill: 'both' });

Easing

Each ease is a pair of After Effects handles from core/motion/presets.js. Every curve as CSS.

Notes

Match the axis and direction of the last visible move: a rise wipes up (inset(100% 0 0 0) to inset(0)), a slide left wipes from the right. EASE.carry is still fast at the end, so the wipe hands its speed to the next beat’s first move (start that move 60 ms before the wipe ends). Change the direction at the next seam (taste rule seam-variety). For a coloured edge see color-block-wipe.

Sound

Sound: a short swipe, timed to the edge’s fastest frame.