React libraries to do on-scroll animations

Here are some of the React libraries designed to facilitate on-scroll animations in react.

React ScrollMagic

React ScrollMagic integrates with the ScrollMagic library, which is well-known for its scroll interaction capabilities. ScrollMagic helps you to easily react to the user's current scroll position. It's a great tool for doing things like sticking elements as you scroll, triggering animations on scroll, and even synchronizing animation timelines with scroll progress.

Installation:

Since React ScrollMagic is built on top of ScrollMagic, you might need to install ScrollMagic along with GSAP for animations if you want to use its full capabilities:

npm install scrollmagic gsap react-gsap

Example Usage:

To use React ScrollMagic, you might also incorporate it with react-gsap (for GSAP animations) as they pair nicely together:

import { Controller, Scene } from 'react-scrollmagic';
import { Tween } from 'react-gsap';

const ScrollAnimationComponent = () => (
  <Controller>
    <Scene triggerHook="onLeave" duration={300} pin>
      {(progress) => (
        <div className="sticky">
          <Tween from={{ opacity: 0 }} to={{ opacity: 1 }} totalProgress={progress} paused>
            <div>Your Content Here</div>
          </Tween>
        </div>
      )}
    </Scene>
  </Controller>
);

In this example, the Tween component from react-gsap is used to animate the opacity of an element based on the scroll progress. The Scene component from react-scrollmagic sets up the trigger and duration for this animation.

AOS (Animate On Scroll) Library for React

Although not a React-specific library, AOS (Animate On Scroll) is a small, yet powerful library that can be easily integrated into React projects for scroll animations. It's straightforward and doesn't require React bindings to work effectively within a React project.

Installation:

npm install aos

Example Usage:

First, initialize AOS in your component:

import AOS from 'aos';
import 'aos/dist/aos.css'; // Import AOS styles
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    AOS.init({
      // Global settings:
      once: true, // whether animation should happen only once - while scrolling down
    });
  }, []);

  return (
    <div>
      <div data-aos="fade-up">Fade Up</div>
      <div data-aos="fade-down" data-aos-delay="200">Fade Down</div>
      {/* More elements with AOS animations */}
    </div>
  );
}

export default App;

In your HTML or JSX, use the data-aos attribute to specify the type of animation you want to apply to each element. AOS is incredibly simple to use and integrates seamlessly into React apps, providing a wide variety of animations that trigger on scroll.

Framer Motion

This library has also started supporting on scroll animations in the latest update as of 2024.