Intro to “Scroll Animation” in React with React UI Animate

When it comes to web animations, scroll animation proved itself to be one of the most implemented animation. You can find different options out there which will help you implement scroll animations in your react project. I use react-ui-animate which is an animation library for gestures and animation for react, for scroll animation and I am going to teach you how to do the same below.

Demo

Final result

Installation

Just run the following code inside your react project with npm

npm i react-ui-animate

or you could use yarn

yarn add react-ui-animate

Basic Concept

useScroll()

To implement scroll animation, we use the useScroll() hook provided by react-ui-animate.

We can use the useScroll() hook directly like the useEffect() hook in any functional component. useScroll() hook accepts a callback as its first argument. This callback function is called every single time when the user scrolls the document with an object as its first argument used to animate things.

An object argument in the callback function has a property scrollY which is all we need. This scrollY has the initial value of 0 at top of the document and its value increases when we scroll down the document.

Now, Let us save the value of scrollY to a state y and use this y value to manipulate the rectangular box which is positioned fixed at the top left corner of the document. We are also able to manipulate different properties of an element with just y value. For this, we use interpolation.

Interpolation

Another main concept behind animation is interpolation. Suppose you want to change the left position of the box from 0px to 100px when the value of y changes from 0 to 400. To do this, react-ui-animate provides an interpolate function which maps certain input range into output range.

Example

const left = interpolate(y, [0, 400], [0, 100]);

Code

Demo

Here when y changes from 0 to 400, the interpolation function maps it from 0 to 100.

As you noticed, it does not stop at 100px left, it extrapolates beyond the output range. To clamp the value to output range [0, 100], we pass an object with extrapolate as key and clamp as value in the 4th argument of the interpolate function.

const left = interpolate(y, [0, 400], [0, 100], { extrapolate: “clamp” });

Demo

We can also interpolate colors in the same manner,

const backgroundColor = interpolate(y, [0, 400], [“#3399ff”, “red”], { extrapolate: “clamp” });

Code

Demo

That’s all for the scroll animation.

Now, in the demo above, I would like you to bring your attention to the fact that it runs smoothly for minor animation but might have some performance issues while building larger animation because we used “state”.

We will have a look at how we can solve it using the useAnimatedValue() hook in the next article.

You can check out live example at

https://codesandbox.io/s/intro-to-scroll-animation-in-react-with-react-ui-animate-zkz27

You can follow me on github:

https://github.com/dipeshrai123

If you enjoyed this article, please recommend and share it! Thanks for your time.

Dipesh Rai