Image reveal slider example for Vue

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.

Not ready? Try 10 Motion+ demos free.