How-to Guides
Use easing and tweens
Retarget any animation with an easing curve for natural, cinematic motion.
Goal
Replace robotic linear motion with curves that accelerate and decelerate naturally.
How easing works
Most animations animate linearly by default. Chain .ease(EQUATION, MODE)
immediately after an animation to retarget the previous animation with a
curve:
code.slide_up(0, sec(1)).ease(CUBIC, EASE_OUT);Equations and modes
Prop
Type
EASE_IN— slow startEASE_OUT— slow stopEASE_IN_OUT— slow at both endsEASE_OUT_IN— fast in the middle
See the presets
The example project demonstrates a gallery of easing curves side by side:
Files that made this video
A gallery scene showing easing curves and tween presets.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
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 = 18Store a curve and reuse it
You can capture an easing into a variable and apply it repeatedly for a consistent feel:
let snappy = ease(BACK, EASE_OUT);
title.slide_up(0, 24).ease(snappy);
code.fade_in(ms(200), ms(667)).ease(snappy);Delay before an animation
Offset an animation in time without changing its curve:
code.fade_in(0, ms(667)).delay(ms(500)); // wait half a second, then fade inRecommended pairings
| Motion | Try |
|---|---|
| Things entering | CUBIC / EASE_OUT |
| Things leaving | CUBIC / EASE_IN |
| Playful pop | BACK / EASE_OUT |
| Bouncy arrival | BOUNCE / EASE_OUT |
| Camera moves | SINE / EASE_IN_OUT |
Reference
The full list of equations and modes is in Easing reference.