Image reveal slider
An image reveal slider that uses Motion for Vue's drag functionality and useTransform to map the position of the slider to a clipPath for the image reveal effect, and to the dividing line's background color to fade it out closer to the edges. The slider is made keyboard accessible with arrow keyboard input and spring animations to indicate the slider boundaries.
Related examples
Latest in Vue
Motion+
Unlock all 370+ examples
- Source code for every Plus example.
- Provide examples direct to your agent via Motion's MCP.
- Lifetime access to new examples and APIs.