[feat]: Interpolate with a delay

[zstiggz]

A clear and concise description of what the feature is

When using SpringValue interpolations, we should be able to interpolate with a delay.

Why should this feature be included?

For complex animations with multiple components and values being animated together, it's nice to be able to hook them all to one driving spring. It can be very difficult to use the existing interpolation API to stage animations, especially when they are asymmetrical (want a delay on animation in, no delay on animation out).

Please provide an example for how this would work

import {delay} from 'react-spring'

const spring = useSpring({ x: isActive ? 1 : 0})

// component with delay
<animated.div style={{opacity: spring.x.to(x => delay(x, 200))}} />

// component without delay
<animated.div style={{opacity: spring.x}} />

// component with existing api
<animated.div style={{opacity: spring.x.to([0, 0.5, 1), [0, 1, 1])}} />

[joshuaellis]

I think there's a misconception around who's animating, the actual useSpring hook is animating as opposed to the animated component so adding a delay to interpolations could be very difficult.

It'd help if you could explain why you'd want this as opposed to just delaying the spring? (see the ref table here).