Skip to content

Instantly share code, notes, and snippets.

@pangolingo
Created March 14, 2018 16:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pangolingo/cc0612d7fbce9bbb076283d3bc4c88d9 to your computer and use it in GitHub Desktop.
Save pangolingo/cc0612d7fbce9bbb076283d3bc4c88d9 to your computer and use it in GitHub Desktop.
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