Carousel Slide

Slides stay in place and dissolve into each other instead of sliding.

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.

A center item faces forward while side items angle away in perspective.

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.

Scrolling settles onto defined snap points such as slides or sections.

Add "Scroll Snap" (also called scroll snapping or snap scrolling) to [where].
When scrolling stops, the view should settle neatly onto the nearest section so each one lines up with the edge instead of stopping halfway.
Use the browser's native snapping so wheel, touch and keyboard scrolling all keep working, and make sure content taller than the view can still be read in full.

The new page slides in from one side while the old page slides out, with direction following navigation depth.

Add a "Slide Page Transition" (also called push / pop or a directional slide) to [where].
Going forward, the new page should push in from the side while the old page slides out the other way; going back, both should move in the opposite direction: smooth, easing in and out.
Tie the direction to navigation depth, including the browser's back button, and keep the page from scrolling sideways during the slide.

A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.

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.

Dragging an item makes others slide out of the way and settle in the new order.

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.

A side panel slides in from the left, right or top edge, pushing or overlaying content.

Add a "Drawer Slide" (also called off-canvas or a side sheet) to [where].
The panel should slide in from the side edge over the content while the page behind dims, quick and smoothly decelerating, and slide back out the same way when closed.
Keep keyboard focus inside the open drawer, close it with Escape or a click on the dimmed area, and return focus to the button that opened it.