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.