Timing animations can loop indefinitely. Set the loop option on a timing transition to one of two modes:
'repeat' — restarts the animation from the beginning each cycle'reverse' — alternates direction, animating forward then backward
Spring animations do not support looping. loop is only available on type: 'timing' transitions.
initialAnimate is required for looping. It defines the starting value the animation resets to (for 'repeat') or reverses from (for 'reverse'). Without it, the loop has no defined start point.
Examples
Pulsing opacity
Uses loop: 'reverse' to fade between 0.3 and 1 continuously.
<EaseView
initialAnimate={{ opacity: 0.3 }}
animate={{ opacity: 1 }}
transition={{ type: 'timing', duration: 1000, easing: 'easeInOut', loop: 'reverse' }}
/>
loop: 'repeat' to scroll content from its starting position to -300 pixels, then jump back and repeat.
<EaseView
initialAnimate={{ translateX: 0 }}
animate={{ translateX: -300 }}
transition={{ type: 'timing', duration: 3000, easing: 'linear', loop: 'repeat' }}
/>
Loop modes compared
| Mode | Behavior | Common use cases |
|---|
'repeat' | Jumps back to initialAnimate value and plays again | Marquee scroll, progress indicators |
'reverse' | Plays forward to animate, then backward to initialAnimate, and repeats | Pulse, breathe, shimmer |
