Carousel: iOS exposure slider
An example of creating a camera exposure slider interface with animated notches using the Motion+ Carousel component for React.
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.
