Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of how to interpolate animation properties based on a base Animated.Value
let baselineAnimationValue = new Animated.Value(0);
let titleXPosition = new Animated.Value(0);
let titleOpacity = new Animated.Value(0);
// our baseline animation, going from 0 to 1
function runBaselineAnimation() {
Animated.timing(this.state.baselineAnimationValue, {
toValue: 1,
duration: 2000, // 2 seconds
}).start();
}
// move the title up as the animation runs
function titleYPosition() {
return baselineAnimatedValue.interpolate({
inputRange: [0.0, 1.0],
outputRange: [0, -42], // animated between 0 and -42
extrapolate: 'clamp',
}
}
// fade the title as the animation runs
function opacity() {
return baselineAnimatedValue.interpolate({
inputRange: [0.0, 1.0],
outputRange: [1.0, 0.5], // animate between 1 and 0.5
extrapolate: 'clamp',
}
}
<Title style={{opacity: titleOpacity(), transform: [{ translateY: titleYPosition() }] />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.