Before-After Slider
Also called Image comparison slider, Compare slider
A draggable divider reveals one image on one side and another on the other.
Use for
Photo retouching, product comparisons
Variants
- horizontal
- vertical
- hover-controlled
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 "Before-After Slider" (also called an image comparison slider or compare slider) to [where].
Two images sit on top of each other, and dragging a vertical divider reveals more of one and less of the other; the divider follows the pointer directly with no lag.
Start the divider in the middle, and make it work with touch and with the arrow keys.Similar motions
Scroll inside
Image Reveal Wipe
Also called Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
An image is uncovered by a shrinking cover or expanding mask edge.
Use for
Editorial images on scroll
Add an "Image Reveal Wipe" (also called a mask reveal or clip-path reveal) to [where].
As the image scrolls into view, a cover should wipe away from one side and smoothly uncover it in step with the scroll, so it is fully open well before it leaves the screen.
Reserve the image's space so the layout does not jump, and show the image fully uncovered for users who prefer reduced motion.ABCDEFGHIJKL
Move your pointer here
Text Reveal Card
Also called Spotlight Text Reveal
Moving the pointer across a card uncovers hidden text underneath a mask edge or spotlight.
Use for
Feature cards
Add a "Text Reveal Card" effect (also called spotlight text reveal) to [where].
As the pointer moves across the card, a vertical edge should follow it closely and uncover hidden text on one side, smooth and direct with no lag.
On touch devices, where there is no pointer to follow, let a drag or tap reveal the hidden text, and make the hidden text available to screen readers.A
Hover to play
SVG Mask Reveal
Also called SVG Mask Effect, Clip-path Reveal, Spotlight Mask
A masked shape wipes or follows the pointer to uncover content beneath.
Use for
Image and content reveals
Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.A
Drag to play
Drag
Also called Draggable, Drag constraints
An element follows the pointer when dragged and can be limited to an area or an axis.
Use for
Sliders, sortable cards
Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.More in Image & Media
Hover to play
Hover Zoom
Also called Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
An image scales up inside its frame on hover, sometimes panning with the pointer.
Use for
Product cards, thumbnails
Add a "Hover Zoom" effect (also called image zoom on hover or zoom-pan) to [where].
While the pointer is over the image, it should slowly and smoothly scale up inside its frame while the frame keeps its size, and ease back when the pointer leaves.
Clip the image to its frame so nothing spills over the layout, and show the same zoom on keyboard focus.Ken Burns Effect
Also called Slow pan and zoom, Ken Burns, Kenburns
A still image slowly zooms and pans across its frame.
Use for
Hero slideshows, backgrounds
Add a "Ken Burns Effect" (also called slow pan and zoom) to [where].
While each image is shown it should very slowly zoom and drift in one direction only, then cross-fade to the next image, which moves in a different direction: calm and continuous.
Keep every image covering its whole frame at every moment so no edge ever shows, and keep the images still for users who prefer reduced motion.