Scene Transitions
A transition tells the viewer how two scenes relate. A crossfade says "this continues." A push slide says "next point." A flash cut says "wake up." A blur crossfade says "drift with me." Choose transitions that match what the content is doing emotionally, not just technically.
Energy → Primary Transition
| Energy |
Primary |
Accent for key moments |
Duration |
Easing |
| Calm (wellness, brand story, luxury) |
Blur crossfade, focus pull |
Light leak, circle iris |
0.5-0.8s |
sine.inOut, power1 |
| Medium (corporate, SaaS, explainer) |
Push slide, staggered blocks |
Squeeze, vertical push |
0.3-0.5s |
power2, power3 |
| High (promos, sports, music, launch) |
Flash cut, zoom through |
Staggered blocks, gravity drop |
0.15-0.3s |
power4, expo |
Pick ONE primary (60-70% of scene changes) + 1-2 accents. Never use a different transition for every scene.
Mood → Transition Type
Think about what the transition communicates, not just what it looks like.
| Mood |
Transitions |
Why it works |
| Warm / inviting |
Light leak, blur crossfade, focus pull, film burn |
Soft edges, warm color washes. Nothing sharp or mechanical. The transition feels like sunlight. |
| Cold / clinical |
Squeeze, zoom out, blinds, shutter, grid dissolve |
Content transforms mechanically — compressed, shrunk, sliced, gridded. Zoom out creates clinical distance. No softness. |
| Editorial / magazine |
Push slide, vertical push, diagonal split, shutter |
Like turning a page or slicing a layout. Clean directional movement. Diagonal split is a bold editorial cut. |
| Tech / futuristic |
Grid dissolve, staggered blocks, blinds, chromatic aberration |
Grid dissolve is the core "data" transition. Pattern-based, coordinated. Data-grid aesthetic. |
| Tense / edgy |
Glitch, VHS, chromatic aberration, flash cut, ripple |
Instability, distortion, digital breakdown. The medium itself is corrupted. |
| Playful / fun |
Elastic push, 3D flip, circle iris, morph circle, clock wipe |
Overshoot, bounce, rotation, expansion. Clock wipe has a whimsical mechanical quality. |
| Dramatic / cinematic |
Zoom through, zoom out, gravity drop, overexposure, diagonal split, color dip to black |
Scale, weight, light extremes. Big spatial movements. Diagonal split is a bold geometric cut. |
| Premium / luxury |
Focus pull, blur crossfade, color dip to black, slow crossfade |
Restraint. Long durations, soft easing, minimal movement. The transition barely exists — that IS the luxury. |
| Retro / analog |
Film burn, light leak, VHS, clock wipe |
Organic imperfection. Warm color bleeds, scan line displacement. Clock wipe evokes broadcast TV. |
Narrative Position
| Position |
Use |
Why |
| Opening |
Your most distinctive transition. Match the mood. 0.4-0.6s |
Sets the visual language for the entire piece. |
| Between related points |
Your primary transition. Consistent. 0.3s |
Don't distract — the content is continuing. |
| Topic change |
Something different from your primary. Staggered blocks, shutter, squeeze. |
Signals "new section" — the viewer's brain resets. |
| Climax / hero reveal |
Your boldest accent. Fastest or most dramatic. |
This is the payoff — spend your best transition here. |
| Wind-down |
Return to gentle. Blur crossfade, crossfade. 0.5-0.7s |
Let the viewer exhale after the climax. |
| Outro |
Slowest, simplest. Crossfade, color dip to black. 0.6-1.0s |
Closure. Don't introduce new energy at the end. |
Blur Intensity by Energy
| Energy |
Blur |
Duration |
Hold at peak |
| Calm |
20-30px |
0.8-1.2s |
0.3-0.5s |
| Medium |
8-15px |
0.4-0.6s |
0.1-0.2s |
| High |
3-6px |
0.2-0.3s |
0s |
Presets
| Preset |
Duration |
Easing |
snappy |
0.2s |
power4.inOut |
smooth |
0.4s |
power2.inOut |
gentle |
0.6s |
sine.inOut |
dramatic |
0.5s |
power3.in → out |
instant |
0.15s |
expo.inOut |
luxe |
0.7s |
power1.inOut |
Implementation
Read catalog.md for GSAP code and hard rules for every transition type.
| Category |
Transitions |
| Content-transforming |
Push slide, vertical push, elastic push, squeeze, zoom through, zoom out, gravity drop, 3D flip |
| Reveal/mask |
Circle iris, diamond iris, diagonal split, clock wipe, shutter |
| Dissolve |
Crossfade, blur crossfade, focus pull, color dip |
| Cover |
Staggered blocks, horizontal blinds, vertical blinds |
| Light |
Light leak, overexposure burn, film burn |
| Distortion |
Glitch, chromatic aberration, ripple, VHS tape |
| Pattern |
Grid dissolve |
| Instant |
Flash cut, morph circle |
Transitions That Don't Work in CSS
Avoid: star iris, tilt-shift, lens flare, hinge/door. See catalog.md for why.
