Morph between elements

Goal

Transform one element into another on screen — a word into another word, or one shape into a different shape — rather than cutting between them.

The morph method

s.morph(old, new, style, start, dur);

• old — the element to transform from
• new — the element to transform into
• style — "fade", "blur", "scale", or "roll"
• start, dur — timing as raw frames or helpers such as ms(500) / sec(2)

Morph text

Create both pieces of text, then morph between them:

let s = scene("Word Morph", 160);

let a = s.text("erosion", 480, 320).font_size(64);
let b = s.text("deposition", 440, 320).font_size(64);

a.fade_in(0, 16);
s.morph(a, b, "fade", 60, 40);

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

Per-node morph animations

Nodes also carry morph-style transitions you can use on their own:

node.morph_out(80, 20); // morph the node away
node.grow_in(0, 20);    // grow it into being
node.blur_in(0, 18);    // resolve from a blur
node.blur_out(80, 18);  // dissolve into a blur

Tips

• Morphs read best when the two elements share a position and size.
• Pair with easing for a softer transform.
• For scene-to-scene changes, use a transition instead of a morph.

Reference

morph and the morph-style node animations are in Scene API and Code & node animations.