Carousel: iOS exposure slider
Matt Perry
In this tutorial, we're going to build the Carousel: iOS exposure slider example step-by-step.
This example is rated expert difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Carousel: iOS exposure slider tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Carousel: iOS exposure slider example recreates the smooth, tactile feel of iOS camera's exposure adjustment control. As users drag the slider, notches animate in and out with spring physics, mimicking the visual feedback of the native control.
This example uses several Motion APIs working together:
The Motion+
Carouselcomponent for the draggable slider.useTickeranduseTickerItemhooks to track individual notch positions.useMotionValueto hold the exposure value.useTransformto derive display values.useMotionValueEventto respond to position changes.The
animateprop to spring-animate notches as they grow and shrink.
