Reference
Easing
Easing equations and modes for .ease().
.ease(EQUATION, MODE) retargets the previous animation with an easing
curve. You can also build a reusable curve with ease(EQUATION, MODE) and pass
it around.
code.slide_up(0, 24).ease(CUBIC, EASE_OUT);
let snappy = ease(BACK, EASE_OUT);
title.fade_in(0, 20).ease(snappy);Equations
| Equation | Feel |
|---|---|
LINEAR | Constant speed (no easing). |
SINE | Gentle. |
QUAD | Mild acceleration. |
CUBIC | Standard, natural. |
QUART | Stronger. |
QUINT | Very strong. |
EXPO | Dramatic, exponential. |
CIRC | Circular arc. |
BACK | Overshoots slightly. |
ELASTIC | Springy oscillation. |
BOUNCE | Bounces at the end. |
Modes
| Mode | Description |
|---|---|
EASE_IN | Slow start, fast finish. |
EASE_OUT | Fast start, slow finish. |
EASE_IN_OUT | Slow at both ends. |
EASE_OUT_IN | Fast in the middle. |
Gallery
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 = 18Recommended pairings
| Use | Equation / Mode |
|---|---|
| Entrances | CUBIC / EASE_OUT |
| Exits | CUBIC / EASE_IN |
| Playful pop | BACK / EASE_OUT |
| Bouncy arrival | BOUNCE / EASE_OUT |
| Camera moves | SINE / EASE_IN_OUT |
See also: Use easing and tweens.