Transitions

This page covers the data-clip-transition, data-clip-enter and data-clip-exit attributes, each transition kind, the luma, halftone and dissolve masks, the styles Kinetic writes on a clip, and the transition() helper for elements that are not clips.

Transitions

A clip that starts before the clip it replaces ends overlaps it, and data-clip-transition turns the overlap into a transition of the same length. data-clip-enter and data-clip-exit give a clip an entrance or exit of its own length, with nothing on the other side. Clips can be scenes, plain HTML or anything with data-start.

<div id="intro" class="layer" data-start="0" data-duration="3">…</div>
<div class="layer" data-start="intro - 0.5" data-duration="4" data-clip-transition="push from-right power3.inOut">…</div>

<h1 data-start="1" data-duration="4" data-clip-enter="wipe from-left 0.6" data-clip-exit="fade 12f">Launch</h1>

The attributes

• data-clip-transition="kind [direction] [ease]" goes on the incoming clip. It replaces the one sibling with data-start whose window holds this clip's start and ends before this clip ends, so a backdrop that runs past this clip is never the one. The transition runs from this clip's start to the end of the other's window, with the kind's incoming styles on this clip and its outgoing styles on the other.
• data-clip-enter="kind [direction] length [ease]" applies the incoming styles over the clip's first length.
• data-clip-exit="kind [direction] length [ease]" applies the outgoing styles over the clip's last length, ending at the clip's end. A clip with no data-duration or data-end ends with the composition.

The attributes are the default way to fade a clip, with no scene code; see Which to use for when edges and presence fit instead.

The kind comes first, and the other tokens follow in any order.

• A direction is from-left, from-right, from-top or from-bottom for the kinds that slide or wipe and for halftone, and clockwise or anticlockwise for clock.
• The map kinds take tokens of their own (Luma transitions). luma takes its map as url(path), and invert and soft.
• halftone takes a cell in px (24px), an angle in degrees (45deg) and soft, and dissolve takes a grain in px (3px) and soft.
• A length is seconds as a number (0.6), seconds with s (0.6s), or frames with f (18f, divided by the composition's fps). data-clip-transition takes none, since its length is the overlap.
• An ease is any name ease() accepts, cubic-bezier(…) included. The default is power2.inOut.

Progress, overlaps and warnings

Progress runs from 0 on the window's first frame to 1 on its last captured frame, 1/fps before the window ends, as a scene's progress does. There the outgoing clip is at its final state, and on the next frame its window hides it.

• At p = 1 the incoming clip has no transition style except cover's z-index, and at p = 0 the outgoing clip none except reveal's.
• A clip can have data-clip-transition and data-clip-exit, but not data-clip-transition and data-clip-enter.
• When two transitions cover one clip at the same time, such as a data-clip-exit and the outgoing side of the next clip's data-clip-transition, the clip gets the properties of both. Where both write opacity, the two multiply.
• Kinetic applies the transitions clip by clip in markup order, and on each clip its data-clip-transition, then its data-clip-enter, then its data-clip-exit. For any other property two of them write, the one applied last is used.

Development builds warn once per clip (KN-115), and Kinetic leaves the clip as it is, for each of these.

• An unknown kind or token, or a token the kind does not take, such as a url() on any kind but luma.
• luma with no url(), or two of one token.
• A length on data-clip-transition.
• A data-clip-enter or data-clip-exit with no length, or one longer than the clip.
• A clip with both data-clip-transition and data-clip-enter.
• A data-clip-enter or data-clip-exit on an element with no data-start.

A data-clip-transition that overlaps no sibling, or more than one, is KN-116.

The kinds

Positions are percentages of the clip's own box, and p is the eased progress.

cover sets z-index: 1 on the incoming clip for the whole overlap, p = 1 included, so it comes in over the outgoing one wherever each sits in the markup. reveal sets it on the outgoing clip for the whole overlap, p = 0 included.

• Both remove it after, and both need positioned clips, as the .layer class in the patterns gives.
• The clock hand reaches each corner at a multiple of 45 degrees whatever the box's shape, since its angles are taken in the box's percentages.
• flip looks three-dimensional only under perspective on the clips' common parent, and without it the clips narrow and widen flat.

#stage { perspective: 1600px; }   /* the clips' common parent, for flip */

See Which to use for the blur kind beside the other ways to blur.

Luma transitions

luma, halftone and dissolve mask the clip with a grayscale map. The clip shows where the map is darker than a threshold that sweeps through the map's tones as the eased progress runs from 0 to 1, so the map's dark parts come in first.

<div class="layer" data-start="intro - 0.8" data-duration="5" data-clip-transition="halftone from-left 32px power2.inOut">…</div>
<div class="layer" data-start="8" data-duration="4" data-clip-enter="luma url(maps/burn.png) soft 1s">…</div>
<div class="layer" data-start="12" data-duration="4" data-clip-exit="dissolve 20f">…</div>

The mask, the filter and the maps

• The mask is clamp(k × (threshold − map)), with the threshold running from −1/k at p = 0 to 1 + 1/k at p = 1, so the clip is hidden on the window's first frame and shown on its last. k is 30, a sharp edge, or 8 with soft, an edge about an eighth of the map's tones wide.
• In data-clip-exit the mask is 1 minus that, so the clip goes in the map's order. In data-clip-transition the mask is on the incoming clip only, and the outgoing clip stays under it, as with wipe.
• Kinetic adds one hidden <svg> to the composition root, with a <filter> for each clip and attribute that uses one of these kinds. It writes filter: url(#kinetic-map-N) on the clip inside the window only, and on each seek it changes only the filter's map and threshold.
• The filter's region is the clip's own box, so anything the clip draws outside it, such as overflowing children, a shadow or an outline, is cut off during the transition. A clip with an empty box, such as a wrapper with no height around positioned children, shows nothing during its transition, and development builds warn (KN-115).
• The halftone and dissolve maps are drawn as PNGs at the clip's size, at readiness and once for each new size the clip takes during its transition. Each is the same PNG on every page load, so check() and every render agree.
• Each size's PNG is kept for the life of the page, since check() compares the filter's URL from seek to seek, so a clip whose size animates keeps one PNG per size it has taken.
• Give a dissolve clip an id. Without one its seed is its place among the composition's [data-start] elements, so a clip added before it changes its noise.
• A luma map is fetched at readiness, and by check() and render(). For a clip added after readiness, the map arrives with the next ready(), check() or render(), and until then the clip stays hidden through its transition.
• A map that fails to load or decode is a [KN-117] error on the console in every build, and readiness holds (Failure). A map from another origin needs Access-Control-Allow-Origin from its server, since a filter draws nothing from another origin's image.
• blur and these three all write filter. For two of them on one clip at the same time, the order of the attributes above decides which is used.

What Kinetic writes

• Kinetic writes translate, scale and rotate, the individual transform properties, and never transform. The browser applies those three before transform, so a transition composes with a transform from the clip's author or a keyframes track.
• It writes opacity, clip-path, filter and, for cover and reveal, z-index, inline, only inside the window. Outside the window each property comes off, and the clip's inline value from before Kinetic first wrote it comes back, as does a value written on the clip between two seeks inside the window.
• Values have at most four decimals.
• It applies them on every seek, with or without a runtime on the page, and once before the page is shown, so check() compares them and render() captures them.

• Development builds warn once per clip when a property a transition wrote was written again during the same seek, or between two seeks inside the window (KN-156).

transition(kind, p, options)

transition(kind, p, { direction }) returns { in, out }, the two style objects of a kind at p, the progress the caller has already eased.

An unknown kind, a direction the kind does not take, or a p that is not a finite number throws KN-100.

The values are the ones the attributes write, with camelCase keys (clipPath, zIndex), for data-bind-style on anything that is no clip, such as a layer inside a scene or a card in a list.

const { scene, transition, ramp } = wildflower.kinetic;

scene('quiz', {
    computed: {
        turn() { return transition('flip', ramp(this.local, 1.6, 2.2, 'power2.inOut')); },
        question() { return this.turn.out; },
        answer() { return this.turn.in; },
    },
});

• in is {} at p = 1 and out is {} at p = 0, apart from reveal's zIndex: 1.
• luma, halftone and dissolve throw KN-100 too, since their mask is a filter that needs a clip.

A clip fades by its attributes, with no helper; see Which to use.