animation examples
Transitions Animation Examples
Transition shots bridge scenes — wipes, gradient dissolves, whip pans, and morphs that carry the viewer between frames. 21 shots with video previews and agent-ready Remotion code below.
Bottom Push Stack WipeBottom-edge push chapter switch — the new scene, background color included, is pushed in as a full-screen block from the bottom edge, physically shoving the old scene off-screen. Consecutive chapters each carry a saturated background color, with content pinned to each chapter's own color coordinate system and moving with it
Single push 30f + in-chapter hold ~1s; demo triple push 140f (~4.7s)
Bubble Swarm TakeoverPearl-gloss bubble swarm curtain transition — bubbles of varied sizes drift in from off-screen, growing until they fill the whole screen, while the page simultaneously "washes white". The cut is hidden at the occlusion peak, and once the bubbles scatter outward the new scene is already there; an i18n text-capsule variant can be mixed in
~4.3s (130f: drift-in ~67f + peak-hide cut + scatter ~43f)
Card Flip RevealFeature card 3D flip reveal — a card flips 180° around the Y axis, and at its thinnest side-edge moment a highlight band that moves with the angle sweeps across; the back face reveals a large conclusion number, cards scanning across the whole row one by one with staggered timing
Single flip 26f, three-card stagger 10f, ~4.9s total (incl. hold)
Card Flock TumbleThree UI page cards tumble through 3D from their thin side edges and land as a stepped stack (fully crisp throughout, smoothly continuous splines), keep slowly rotating after landing, snap-suck toward the center, burst into a single turbulent smoke ring that expands outward, and a giant wordmark sweeps across to close
Tumble ~1.5s + slow-rotate showcase ~0.3s + suction 0.3s + smoke ring + giant wordmark ~2s; whole section 4.5s
Circle Match IrisCircle-matched iris transition — the iris bursts from the center of a circular element on the foreground page, and the new page's circular chart inside the iris picks up on the same circle; the match cut gives the iris a semantic anchor
4.7s (anchor pulse 30f + iris expansion 45f + chart growth 55f + stillness 40f)
Color Block Step WipeDiscrete stepped color-block screen swallow, two variants — A: a small central bar hard-steps 3–5 times to fill the full screen (after takeover a badge pops out in two jumps); B: a color block eats the screen diagonally from a corner in 3 steps while carrying a page card forward one jump per step
A ~2.5s (growth 44f + badge + hold) / B ~1.5–2s (3 jumps 30f + hold); demo total 150f
Cube NavigationContent pasted onto all six faces of a 3D cube, the camera alternating between front close-up → pulled back to an isometric view of the edges → rotating to a face and pushing in, stepping through each; every face computes lighting in real time from its normal direction
~6.0s (180f@30fps; five camera steps, ~0.7s each + hold)
Gradient TransitionBackground smoothly transitions among the three CSS gradient types linear, radial, and conic — angle, color stops, center, and radius each interpolate parameter-by-parameter, with short cross-fades between segments when switching types
~6.0s (180f@30fps; linear 0–2.4s · radial 2–4.2s · conic 4–6s)
Line Carry TransitionLine-relay lateral transition — scene A's progress bar extends off-frame, the camera follows the line sideways, the line rounds a corner mid-move to frame scene B's card box, with no cut anywhere
~5.3s (progress bar fills + lateral move 60f + framing + content fade-in + stillness 36f)
Mosaic ReframeTwelve tiles continuously morph among a regular grid, a feature mosaic, and a diagonal waterfall — position, width, and height each interpolate independently, with a slight per-tile stagger and holds between segments
~6.0s (180f@30fps; emergence 0–0.6s · A→B 1.6–2.5s · hold · B→C 3.7–4.8s)
Page Turn TransitionsFull-page solid-block transitions, two variants — cube-rotate (two pages glued to adjacent cube faces, rotating 90°) and barn-door-split (the old page splits in two and slides apart, the new page meeting it head-on)
Per variant, previous-state setup 30f + transition 20–38f + ending ≥40f, ~4.4–4.7s
Paper Plane MessengerPaper-plane messenger transition — after clicking "send", the camera pulls back out of window A, the origami plane flies out along a Bézier arc (pitch following the tangent), the camera escorts it through multi-layer parallax props, arrives and settles at window B's door, and B zooms in to take over the full screen
~5s (150f: click 12f → pull-back 16–42f → flight 34–104f → B takeover 112–146f)
Print Texture TransitionsPrint-texture transitions — ink-bleed-reveal (ink bleeding through a wispy edge to eat away the old scene)
4–4.5s (bleed segment 55–80f + stillness ending ≥30f)
Shot TransitionsCamera handoff, six variants — push-to-whiteout flash-cut, straight cruise through dark, focus relay, black-frame text card, whip-pan, and mask-wipe through a window (incl. a depth variant), selected by energy drop
n/a (technique card; frames per variant are in the parameter table, drawn from the adjacent shots' budgets)
Tear Streak TransitionsTear transition — glitch-displace noise tear (hard cut inside 16 horizontal strips misaligning and shaking), strip-level tearing with a digital-glitch meaning
Prior state ≥40f + tear 17–24f + ending ≥40f, ~4.5s (135–140f)
Transition Hidden CutHidden-cut transitions, three variants — foreground-occlusion invisible cut, versus-slam opening, and warm light-leak burn; the hard cut is hidden inside 1–3 frames of occlusion/impact/light peak, and the viewer never sees the scissors
n/a (technique card; frames per variant are in the parameter table, drawn from the adjacent shots' budgets)
Transition TravelTravel-style transitions, two variants — shared-element morph home and letterform-zoom; the camera dives into real elements in the frame to change scenes
n/a (technique card; each variant's action segment 25–60f, surrounding holds counted separately, frames drawn from the adjacent shots' budgets)
Whip Pan TransitionWhip-pan transition — two pages sweep across the same frame with a large translate left/right/up/down, with speed-stretch and motion blur; the previous page whips out from its entry side, the next page whips in from the same side
Per variant, prior state ≥20f + whip 24–40f + ending ≥40f, ~4s (120f)
White Flash Logo Simplify CutA colorful liquid-gradient wordmark sits in flowing shimmer, the frame slams to white overexposure in one beat, and a flat version of the wordmark fades in and freezes on the white ground — one white flash completes a dimensionality reduction of texture
~3.6s (108f@30fps; seated shimmer 0–1.2s · slam to white 1.2–1.5s · flat freeze 1.7–2.7s)
Wipe TransitionsGeometric wipe transitions, two variants — clock-wipe (a radar pointer sweeps 360° to change pages) and blinds-slice (12 vertical strips staggered-flip into a wave)
Per variant, prior state ≥20f + wipe 32–60f + ending ≥40f, ~5s (150f)
Zoom Blur TransitionZoom-punch transition — the previous page zooms in and fades out through blur, the next page punches in from magnified blur and resets; both pages moving along the same depth direction hides the cut point
Per variant, prior state ≥20f + punch 24–40f + ending ≥40f, ~4s (120f)