Back to Motion Prompt examples
Landing page & web effects · #15
Before/after slider
Drag a divider to compare before and after. Dragging the line in the middle of the photo left and right changes how much of the grey "before" (left) and the coloured "after" (right) is shown.
Hover & click interactionsbefore-afterimage-comparisonsliderdragcompareclipphoto
Full motion specification
How the movement works
Use it on pages that sell a change: renovation, beauty, photo retouching.
- 01Photo frame 359 × 140 (radius 10). Right: the edited photo in colour. Left: the same photo as the "before" (saturation removed, navy at 0.18 opacity on top).
- 02The before image is clipped to the left of the divider. On the divider: a white line (3 wide) and a white circle (radius 17) with left/right arrows.
- 03At 0.7 s the circle is grabbed; the divider goes 50%→20% (0.75–1.55 s) →82% (1.55–2.65 s) →50% (2.65–3.55 s), all cubic ease-in-out.
- 04Released at 3.62 s. Labels BEFORE (top left) and AFTER (top right).
Prompt
Show the project photos as a before/after slider: drag the middle line to compare before on the left and after on the right.