Learn 49 Page Transition concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Replaces one page with another immediately, without interpolated motion.
Implement an instant page transition for a fast utility workflow. Update the URL, title, main heading and document state atomically, move focus to the new main heading, restore the correct scroll position, preserve browser back and forward behavior, and do not add decorative motion.Dissolves the outgoing page while the incoming page becomes visible.
Create a progressively enhanced page crossfade. Keep the navigation functional without animation, prevent duplicate interactive or announced content during the overlap, use a short opacity-only transition, update focus after the new view is ready, support interruption, and switch instantly when reduced motion is preferred.Fades the old page out before the new page fades in with a subtle scale change.
Create a fade-through route transition where the outgoing view fades first and the incoming view then fades in with only a tiny scale change. Avoid a period with no useful feedback, keep focus and history correct, make the sequence interruptible, and remove the scale and delay for reduced-motion users.Moves related pages along the horizontal axis to communicate forward or backward order.
Create a horizontal shared-axis page transition for adjacent steps. Derive direction from navigation history, keep movement modest, pair translation with a small fade, allow Back to reverse the direction, avoid horizontal overflow, maintain focus order, and use an instant or fade-only alternative under reduced motion.Moves related views vertically to show progression through a hierarchy.
Create a vertical shared-axis transition between related hierarchical views. Use direction consistently for deeper and higher levels, keep the viewport stable, avoid moving persistent navigation, preserve reading and focus order, support interrupted navigation, and remove vertical travel when reduced motion is requested.Slides a new page in while pushing the current page out of the viewport.
Implement a slide-push page transition for a mobile-style drill-down. Keep both surfaces clipped inside the viewport during the brief transition, make back navigation reverse it, never leave both pages focusable, preserve the final history state after interruption, and replace the slide with a short fade or instant swap for reduced motion.Places the destination over the current page or uncovers the page beneath it.
Create a cover-and-reveal transition for a nested page. Establish the correct surface elevation, keep the parent page inert while covered, restore its focus and scroll position when revealed, reverse the motion for Back, avoid trapping users during interruption, and offer a non-spatial reduced-motion variant.Uses restrained scale and opacity to switch between unrelated top-level pages.
Create a scale-through transition between unrelated top-level pages. Keep scale close to 1 so text remains readable, crossfade the views, avoid scaling persistent chrome, update focus and title after the destination is committed, support cancellation, and use opacity only or no animation when reduced motion is preferred.Uses document.startViewTransition() around a single-page DOM update.
Implement a same-document View Transition API route change. Wrap only the DOM update in document.startViewTransition, keep an immediate fallback when the API is unavailable, assign unique stable view-transition-name values, update URL and focus correctly, handle rejected promises and rapid repeated navigation, and honor prefers-reduced-motion.Animates a same-origin multi-page navigation using @view-transition.
Implement a same-origin cross-document View Transition using @view-transition { navigation: auto; } in both documents. Keep ordinary links as the functional baseline, stabilize critical destination rendering, use pageswap and pagereveal only when route-specific direction is needed, avoid duplicate transition names, preserve back-forward caching, and disable non-essential motion for reduced-motion users.Carries a selected image smoothly from a listing into its destination page.
Create a shared hero-image transition from a listing card to a detail page. Give only the matching source and destination image a unique view-transition-name, maintain aspect ratio with intentional object-fit behavior, avoid duplicate names during list updates, keep alt text and link semantics intact, and crossfade or swap immediately under reduced motion.Expands a chosen summary card into a full detail view while preserving context.
Build a card-to-detail transition that preserves the selected card's image and title as shared elements. Keep the whole card link accessible, prevent hidden duplicate controls from receiving focus, let Back restore the original card and scroll position, handle direct detail-page entry without animation, and provide a reduced-motion crossfade.Transforms the bounds and content of a source container into the destination surface.
Create a container transform from a compact source surface to a destination page. Animate the container bounds and selected visual elements without scaling body text, stage incoming content after enough space exists, keep source and destination semantics independent of snapshots, avoid clipping focus indicators, and simplify to a fade under reduced motion.Moves a thumbnail into a larger gallery position and back again.
Implement a thumbnail-to-gallery shared-element transition. Preserve the selected image identity, aspect ratio and caption, make arrow-key gallery navigation available after the transition, return focus to the originating thumbnail on close, handle images that are not loaded, and replace zooming with a crossfade for reduced-motion users.Maintains spatial continuity when a list item opens as a detail view.
Create a list-to-detail transition that keeps the chosen row or card visually connected to the destination. Preserve URL-addressable detail routes, selection state, focus return and scroll restoration, ensure only one view is active for assistive technology, support direct links, and avoid spatial movement when reduced motion is preferred.Keeps global navigation visually stable while the page content changes.
Create page transitions inside a persistent application shell. Exclude the header, sidebar and global controls from page snapshots unless they truly change, transition only the main region, update the active navigation state immediately, move focus into the new main content, and ensure fallback navigation works with JavaScript disabled.Transforms a compact header into the destination page title treatment.
Create a morphing page-header transition where a compact source title becomes the destination heading. Keep one real h1 in the committed page, use snapshots only for decoration, avoid scaling text through unreadable sizes, preserve breadcrumb and focus behavior, handle long localized titles, and use a simple title crossfade for reduced motion.Connects an active tab indicator or preview with a dedicated page view.
Create a transition from a tabbed preview into a dedicated page. Preserve selected-tab semantics and URL state, animate only a small indicator or shared preview rather than the tab control itself, move focus to the destination heading, make browser Back restore the tab, and remove spatial motion for reduced-motion users.Moves visual layers at different scroll rates to suggest depth.
Create an optional parallax-scrolling hero with a foreground and background moving at restrained different rates. Use scroll-linked timelines or requestAnimationFrame without layout thrashing, keep text on a stable layer, clamp movement, avoid hijacking scroll, provide an obvious motion-off control, and fully disable parallax when prefers-reduced-motion is set.Reveals page content as it enters the viewport.
Create a progressive scroll reveal for non-critical sections using IntersectionObserver. Content must be readable and present without JavaScript, reveal each section at most once, avoid delaying nearby content, preserve DOM order, do not use motion as the only grouping cue, and show everything immediately under reduced motion.Maps document scroll position to a persistent reading-progress indicator.
Create a scroll-linked reading-progress indicator using a CSS scroll timeline with a safe JavaScript fallback. Keep it supplementary to headings and landmarks, calculate against the true scrollable range, update without forced synchronous layout, use progressbar semantics only if users need the value, and avoid announcing every change.Keeps a visual stage fixed while narrative steps update as the reader scrolls.
Build a sticky scrollytelling section with a stable visual stage and sequential text steps. Keep the full narrative meaningful in normal document flow, use IntersectionObserver for active-step state, avoid excessive sticky duration, provide controls or a static alternative for essential media, preserve keyboard reading order, and disable transform-heavy effects for reduced motion.Pins a section briefly while its internal visual state changes with scroll progress.
Create a pinned section whose visual state progresses through a short finite sequence while scrolling. Use native sticky positioning, keep the page scroll usable, avoid pinning across an excessive distance, ensure all content remains reachable at zoom, offer skip and motion-off options, and collapse to a static stacked layout under reduced motion.Maps a vertical reading sequence to a controlled horizontal visual journey.
Create a horizontal visual story without hijacking wheel or touch behavior. Keep semantic content in logical reading order, provide visible previous and next controls, support keyboard and touch panning, expose position, contain horizontal overflow, allow users to bypass the story, and stack panels vertically for reduced-motion or narrow-screen users.Guides a scroll container toward discrete full-page or section positions.
Implement CSS scroll snap for a finite sequence of page sections. Use proximity rather than mandatory snapping where content length varies, provide visible controls and landmarks, maintain natural keyboard and touch scrolling, avoid trapping users between snap points, account for sticky headers and zoom, and disable smooth scrolling under reduced motion.Changes the page surface palette as themed sections become active.
Create a section-driven background-color transition as the active chapter changes. Keep text contrast valid throughout interpolation, define a static color per section, use IntersectionObserver or a view timeline without scroll listeners that thrash layout, avoid color as the only state cue, and make the update instant under reduced motion.Maps scroll progress to frames in an image sequence for controlled storytelling.
Create a scroll-scrubbed image sequence with a poster-frame fallback. Preload only nearby frames, cap resolution and memory, draw accessibly labeled canvas or images, avoid blocking the main thread, keep explanatory text outside the canvas, provide a static or user-controlled alternative, and show one representative frame when reduced motion is preferred.Crossfades related visual states as the reader moves between adjacent sections.
Create a scroll-linked crossfade between two related visual states. Clamp progress to the intended overlap, ensure one understandable static state outside that range, prevent duplicate controls and announcements, keep opacity work compositor-friendly, avoid making essential text translucent, and switch states immediately under reduced motion.Promotes a focused modal task into a complete page while retaining context.
Create a modal-to-page transition for a task that outgrows its dialog. Commit the destination URL, release the focus trap before moving focus to the page heading, restore the background's inert state, preserve entered data, support Back, keep the transition interruptible, and use an immediate surface swap under reduced motion.Expands a side drawer into a dedicated destination page.
Create a drawer-to-page transition that retains the selected item and title. Remove the drawer's modal semantics and focus trap before committing the page, keep Back able to restore the drawer context, avoid moving global navigation, prevent offscreen focus during the transition, and substitute a short fade under reduced motion.Expands a compact bottom sheet into a full-height mobile page.
Create a bottom-sheet-to-page transition for mobile. Respect safe areas and dynamic viewport height, keep the drag handle supplementary to a real expand button, update dialog and page semantics at the committed state, preserve focus and scroll locking, support cancellation, and avoid vertical travel for reduced-motion users.Reveals the destination outward from the activating control or pointer position.
Create a circular page reveal originating from the activating control using the View Transition and Web Animations APIs. Keep a simple navigation fallback, bound the radius to the viewport, never hide focus or content if animation fails, avoid rapid flashing or huge scale, and replace the expanding clip with an instant swap under reduced motion.Moves a solid or branded layer across the viewport to bridge pages.
Create a brief curtain-wipe transition between branded pages. Keep the cover decorative and aria-hidden, never leave it blocking interaction after an error or interrupted navigation, reveal useful loading status if the destination is delayed, avoid long opaque periods, and replace the wipe with a quick fade or direct swap for reduced motion.Separates or joins two panels to reveal a new page beneath them.
Create a split-panel page reveal using two decorative layers. Clip them within the viewport, keep them out of the accessibility tree, ensure the destination is available even if animations are cancelled, avoid covering browser focus indicators, use transform rather than layout properties, and disable the split motion when reduced motion is preferred.Rotates a page-like surface around an edge to reveal the next view.
Create a restrained 3D page-flip for a book-like reader only. Use perspective and correct transform origins, expose visible page content only, keep previous and next buttons available, avoid hover-only activation and text mirrored during rotation, limit use to an apt metaphor, and replace it with an instant page change for reduced motion.Moves from a high-level overview into a focused destination using spatial zoom.
Create a semantic zoom from an overview tile into a focused page. Keep scale changes modest, avoid zooming body text, maintain a stable point of origin, make Back return to the correct tile, preserve URL and focus behavior, use compositor-friendly transforms, and switch to a crossfade when reduced motion is requested.Keeps navigation context visible while destination loading progress is communicated.
Create a page-navigation progress indicator tied to real loading milestones. Delay it briefly to avoid flicker, show determinate values only when trustworthy, keep current content usable when safe, mark the destination region busy, handle success, error and cancellation, never fake completion, and avoid continuous non-essential motion under reduced motion.Replaces structural placeholders with loaded page content without layout shift.
Create a skeleton-to-content page transition whose placeholders match final geometry. Mark the region busy, keep skeletons decorative, reserve image and text space, remove placeholders from accessibility exposure, announce completion only when useful, handle timeout and error states, and swap instantly or with a brief opacity change under reduced motion.Shows the likely destination state immediately while a request is confirmed.
Implement an optimistic page transition for a reversible low-risk action. Show the predicted destination immediately, label pending state clearly, keep the prior state for rollback, reconcile server results without duplicate history entries, preserve user input, handle failure with an actionable message, and never use optimism for irreversible or high-risk operations.Crossfades a reserved placeholder into the final media or content block.
Create a placeholder-to-content crossfade for an image or content region. Reserve final dimensions, decode the resource before revealing it, keep alternative text on the final content, stop showing the placeholder after errors, avoid stacking interactive duplicates, keep the fade short, and perform an instant replacement when reduced motion is preferred.Reveals server-rendered page regions progressively as their data arrives.
Create a streaming page reveal with stable reserved regions for independently arriving content. Render meaningful shell content first, announce only important completion or errors, avoid moving focused controls when later regions arrive, preserve source order, recover each boundary independently, and do not animate every streamed chunk.Moves a failed destination from an error state back into loading and success states.
Create an error-to-retry page transition with a concise problem message, a real retry button and optional alternate action. Keep the failed URL and user context, prevent duplicate requests, expose busy state during retry, move focus only when helpful, announce the final result once, and use state styling rather than distracting motion.Substitutes spatial page motion with a safe instant or opacity-based change.
Implement a reduced-motion variant for every page transition using prefers-reduced-motion and an in-app motion preference. Remove parallax, zoom, 3D rotation and large translation, shorten or eliminate delays, retain clear state changes through instant updates or a subtle opacity change, and allow the explicit user preference to override the operating-system setting.Moves keyboard and assistive-technology context into the newly active page.
Implement focus management after client-side navigation. Once the destination is committed, focus the new main heading or main region with tabindex minus one when needed, avoid stealing focus on minor updates, preserve visible focus styling, announce the new title appropriately, restore trigger focus when returning from temporary surfaces, and test keyboard plus screen-reader flows.Restores or resets scroll position according to navigation intent.
Implement page scroll restoration that sends new forward navigations to the appropriate heading and restores saved positions for Back and Forward. Coordinate with browser history and late-loading content, account for sticky headers, avoid smooth scrolling when reduced motion is preferred, keep fragment links authoritative, and prevent layout shifts from moving the restored target.Chooses forward or reverse motion from the actual browser navigation direction.
Create history-aware page transitions with distinct but restrained forward and backward directions. Derive direction from navigation entries or explicit transition types instead of URL guessing, handle reload and direct entry without motion, keep browser Back and Forward authoritative, avoid corrupting the history stack, and use a direction-neutral fade under reduced motion.Allows a newer navigation or cancellation to safely supersede an active transition.
Implement interruptible page transitions. Cancel or skip an active ViewTransition or Web Animation when a newer navigation wins, abort obsolete data requests, commit only the latest URL and view, keep controls responsive throughout, clean up snapshots and temporary classes on every path, and ensure focus lands in the final destination.Keeps navigation complete when transition APIs or JavaScript are unavailable.
Build page transitions as progressive enhancement over semantic links and server routes. Feature-detect View Transition and scroll-timeline support, perform the state update immediately when unsupported, avoid hiding content before JavaScript initializes, keep deep links and forms functional, and verify navigation with JavaScript disabled and reduced motion enabled.Avoids transition logic that prevents or corrupts back-forward cache restoration.
Make cross-document page transitions safe for the back-forward cache. Avoid unload handlers, clean up timers and transient classes on pagehide, revalidate visual state on pageshow including persisted restores, do not replay entrance motion unexpectedly after Back, preserve form and scroll state, and inspect the browser's bfcache diagnostics.