Direction 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 and timing

The look is vawe.

The clip uses one named ease from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

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.