32Iris wipe

When to use

Use when a click, a cursor or a mark is the thing the eye is on and the next scene should answer it. Shot A is clipped to a circle that closes on that point, and shot B waits underneath and settles from 1.1x to 1 as it is uncovered. It is the closing iris of silent film, so it says “this action caused that scene”.

The code

import { EASE } from '../../core/motion/presets.js';
const px = 0.66 * innerWidth, py = 0.63 * innerHeight;      // the point the eye is on
const R = Math.hypot(px, py);                               // to the farthest corner
const at = `${px}px ${py}px`;
shotA.animate([{ clipPath: `circle(${R}px at ${at})` }, { clipPath: `circle(0px at ${at})` }],
  { duration: 650, delay: 550, easing: EASE.settle, fill: 'both' });
shotB.animate([{ scale: 1.1 }, { scale: 1 }], { duration: 1100, delay: 550, easing: EASE.land, fill: 'both' });

Easing

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

Notes

Use pixels in the keyframes: a var() inside a clip-path keyframe does not interpolate, it flips at 50 percent. Start the radius at the farthest corner, not the diagonal, or the first tenth of a second closes outside the frame. An accelerating-only curve spends all its travel in the last 0.1 s and reads as a snap; ease in, peak at the midpoint, close soft. Let the cursor press first (the button dips to 0.95) so the wipe has a cause. Put the point where the cursor tip is, not the centre of the frame.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: none; the click that closes the iris carries the cue.