Carousel Crossfade
Also called Fade slideshow, Carousel fade
Slides stay in place and dissolve into each other instead of sliding.
Use for
Hero slideshows, testimonials
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Carousel Crossfade" (also called a fade slideshow or carousel fade) to [where].
Slides should stay in place and slowly dissolve into one another, the old one fading out while the next fades in at the same time, then hold for a few seconds before the next change.
Loop seamlessly back to the first slide, pause on hover or focus, and don't auto-advance for users who prefer reduced motion.Similar motions
A
B
Click to play
Crossfade Page Transition
Also called Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
The old page fades out as the new page fades in over the same area.
Use for
Default route change
Add a "Crossfade Page Transition" (also called a cross-dissolve or fade transition) to [where].
On navigation, the old page should fade out while the new page fades in over the same area at the same time: soft and fairly quick.
Keep both pages in the same spot so nothing shifts during the fade, and move focus to the new page's main heading after the change.A
B
C
Click to play
Carousel Slide
Also called Slider, Swipe carousel, Scroll-snap carousel
Slides move horizontally past a viewport, snapping one item into place at a time.
Use for
Hero banners, product galleries
Add a "Carousel Slide" (also called a slider or swipe carousel) to [where].
Each step should slide the row sideways so the next slide snaps into the center, smooth and decelerating, with the neighbours peeking at the edges and the position dots following along.
Move one slide at a time, support swipe on touch as well as buttons and arrow keys, and keep the controls labelled for screen readers.A
B
Click to play
Fade Through
Also called Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
The outgoing content fades out completely, then the incoming content fades in with a slight scale.
Use for
Switching between unrelated destinations
Add a "Fade Through" page transition (also called a fade-through transition or out-in route transition) to [where].
The outgoing content should fade out quickly and completely first, then the incoming content should fade in while scaling up slightly into place.
Never let the two overlap, and keep the incoming content's layout from shifting while it scales.ABCDE
Drag to play
Coverflow
Also called Cover flow carousel
A center item faces forward while side items angle away in perspective.
Use for
Album and media carousels
Add a "Coverflow" carousel (also called a cover flow carousel) to [where].
The center item should face forward while the items on each side turn away in perspective; dragging sideways slides the row, and on release it settles smoothly on the nearest item.
Support arrow keys and swipes as well as dragging, and keep vertical page scrolling working on touch devices.More in Component & Layout
BC
A
A
Click to play
Container Transform
Also called Card expand to detail, Expandable card, Morph card to page
A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.
Use for
List card to detail, FAB to sheet
Add a "Container Transform" transition (also called card expand to detail or an expandable card) to [where].
When the card is opened, the same container should grow smoothly into the full detail view, its old content fading out quickly and the new content fading in once it has nearly finished growing; closing plays it in reverse.
Keep it one continuous container rather than a crossfade between two separate boxes, and move focus into the detail view when it opens.- A
- B
- C
- D
Drag to play
Drag-to-Reorder List
Also called Reorder, Sortable list
Dragging an item makes others slide out of the way and settle in the new order.
Use for
Kanban, sortable settings, playlists
Add a "Drag-to-Reorder List" (also called a sortable list) to [where].
The dragged item should follow the pointer directly and lift slightly, while the other items slide smoothly out of its way; on release it should settle quickly into the nearest slot.
Support touch as well as mouse, and offer a keyboard way to move items with the new position announced to screen readers.