Scrolling Animations

Introduction

Scrolling Animations

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.

Implementation

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.)

Pros

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

Cons

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.

Pros

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.

Cons

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.

Pros

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.

Cons

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

Conclusion