Study 06 · Slider liquid morph
Slider UI.
A liquid transition.
The active pill flows towards the hovered dot as one full, fluid shape, then settles into the hover state.
Try the movement
Enlarged previewHover to explore. Click or tap to select.
At actual size
Move away to return to the selected slide.
Inspect the transition
Developer notes
Build this movement
One fluid shape
- Default: 8px. Hover: 12px. Active: 24px. All 8px high.
- Transfer one pink shape between dots. Keep the connection broad and let the tail catch up quickly.
- Use a fast departure and eased landing over roughly 450–500ms. No thin trail, blur or glow.
- Keep dot centres fixed. Group both arrow buttons to the right, 8px apart.
Interaction
- Hover or keyboard focus previews the target. Leaving returns to the selected slide.
- Click, tap or arrow controls select a slide. Hover alone must not change slide content.
- Continue from the current shape if the target changes mid-animation.
- Reduced motion switches states immediately.
- The copyable example includes the controls and animation. Connect selection to the real slider.