https://framer.com/m/Distortoslider-iBvwyC.js
Io / Enhancements / DistortoSlider
DistortoSlider
DistortoSlider moves between images by warping one into the next rather than sliding or fading, with thumbnails, labels and a gradient scrim of its own.
Examples
Live specimens for every control the component exposes.
Setup
Content carries the slides; Transition holds the distortion itself — how far it warps and how long it takes. Thumbs, Labels, Gradient and Style cover everything around it.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for DistortoSlider
The move between images should be the point, not a plain cut.
A hero can carry one heavy transition well.
Thumbnails need to sit inside the same component.
The images are strong enough to survive a heavy transition.
Reach for something else
The transition would distract from the pictures themselves.
Readers need to move quickly through many images.
The device cannot afford per-frame processing.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.