Animation is an important and integral element for creating a great user experience for mobile apps. Its critical challenge is to explain to users the app logic, but the common mistake is a reckless use of animation which negates the whole point of improving the user experience. To make an app great, not just good or mediocre, the animation must be integrated correctly and shouldn’t be superfluous.
In this article, you’ll read about how to create header animation with ScrollView and react-native’s Animated API. after the end of the article we’ll have the following output:
How does it work?
Render a header over the ScrollView and set the position top of the ScrollView to offset for the header. Then we can simply interpolate the header using the ScrollView scroll position. So let’s get understand.
“Any fool can know. The point is to understand.” - Albert Einstein
Let’s Code
We are using Interpolate
it for changing position, size, and colors and Animated.event()
to map the ScrollView
position with animated state value. You can read more details about Interpolate and Animated.event.
Always set useNativeDriver:true
in your animation configurations. It will make your animations smooth by skipping the back-and-forth over the bridge between JS code and native code for every rendered frame.
useNativeDriver
currently does not support the position absolute due to React-Native limitations. so for that we usetransform
property. Fortop
we usetranslateY
and forleft
we are usingtranslateX
.
Let’s understand the code now:
Initialize the state scrollY
with the animated value from the constructor like below:
Now we don’t want the component to re-render so we don’t use setState()
method. We use ScrollView's onScroll
prop to map the state with scroll position:
Animated.event()
method map the state scrollY
with ScrollView's
Y offset means Vertical offset.
scrollEventThrottle
controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position but can lead to scroll performance problems due to the volume of information being sent over the bridge. You will not notice a difference between values set between 1–16 as the JS run loop is synced to the screen refresh rate.
Now it’s time to animate the profile image to animate from the middle of the screen to the header left with help of Interpolation.
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
Here, from input range 0–80 our image changes the position from 30 to 38 relative to device width, and from 80–140 it will be from 38 to 10 relatively.
interpolate method called when the state value is changed from ScrollView's
onScroll mapping that we have done before.
Same as position left we set position top, Image height, and width as per ScrollView's
scroll position. Now set these values in the style of Animated.Image
as below:
Now when the user scrolls the ScrollView
the onScroll
method will call and our state scrollY
will change and when the stateY
changed interpolate will call and the beautiful animation is done.
In the current example, I have used many interpolate values like Image border width, Image border color, title opacity, etc. all the methods working on the same principle of scrolling position mapping. you can find the whole source code here:
Hope you like the article. If you have any issues while implementing, feel free to contact me on Twitter & LinkedIn.