React animation example
React Slider Animation: Draggable Card Carousel
A good slider follows your finger and then decides for you. Drag these cards and they track the pointer one to one; let go and the nearest card springs into the centre, taking the flick speed into account. Side cards shrink and dim so the active one is always clear, and the dots below jump to any slide.
- 4.5 KB file
- 5 live inputs
- React runtime
How this spring card slider works
- While dragging, the offset follows the pointer; on release, a flick faster than the threshold moves one slide.
- The resting offset is a spring, so snapping has a slight overshoot that matches the drag speed.
- The index is an input and "change" fires with the new slide, so it stays in sync with your state.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-image-slider.bexode goes in /public (download it below)
export function ReactImageSlider() {
return (
<ExodeUICanvas
src="/react-image-slider.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'change'
}}
style={{ width: '100%', height: 500 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
index | Number | 0 | 0 – 4 |
titles | Text | Aurora,Canyon,Glacier,Dunes,Reef | — |
accent | Text | #f472b6 | hex colour |
ink | Text | #fdf2f8 | hex colour |
bg | Text | #100a0e | hex colour |
Events: change
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: Flutter coverflow carousel