Scrolling Animations

A demonstration of several different forms of React animation that run as the application is scrolled
Role: Developer
Duration: April, 2024

A moon and stars, pulled from the scrolling animation demo site


Scrolling Animations

Scrolling animations are a rising trend in UX, because they create an immersive and interactive experience for the user. They can be used to communicate complex narratives through engaging storytelling.


I wanted to open myself up to creating more scrolling animations for freelance clients in the future. I decided to create a self-contained project containing several scrolling animations, one for each new React package I experimented with. By working hands-on with each of these packages, I was able to get comfortable with all of them, and see the pros and cons of each.


Track Visibility

Track Visibility works by simply passing in a variable to the component you wish to animate that indicates if the component is visible on the screen or not. With that information, the user is able to run an animation when it becomes true. (There is also an option to detect if the component is only partially visible on the screen.)


Because this library doesn't control the animation itself, just the isVisible variable, it can be easily combined with highly customized animations.


It requires a few lines of syntax to implement that are not easily readable. For how simple the library is (just passing in true or false,) I don't want to commit to adding the syntax on every component that requires animation.

React Animate on Scroll

React Animate on Scroll works by importing a ScrollAnimation component that takes in many different props that control the animation delay, duration, whether the elements are visible beforehand, etc.


It's easy to get working right away, since you just wrap the components you want to animate in a ScrollAnimation component, and then adjust the props. It also is built to easily work with either animation libraries such as animate.css, or an animation you have created yourself.


The props can be adjusted to accommodate a large variety of animations, but extremely complex or unusual designs for a scrolling animation might exceed those parameters.

React Scroll Rotate

React Scroll Rotate focuses on one use case: screen elements that rotate at the rate that the user scrolls down the page. This is a use case that is not included in general scroll animation libraries, and provides a uniquely user-interactive experience, since the rotation rate is directly tied to how fast the user is scrolling.


It's easy to get this animation to work right out of the box, since you simply wrap an image in the ScrollRotate component and make some simple adjustments to control the rate, direction, etc. of the rotation.


This library only handles one use case. For other types of animation, other libraries will be required.


This project helped me become familiar with several scroll animation libraries that work in different ways. Between all of these, there is no "best" option, just good options for different use cases. In the future, I'll be able to quickly figure out which one lends itself best to the animation goals I am trying to accomplish.

Other development projects:
Institute of LUV