How to Create a Scroll-Animated Timeline with GSAP in React

Introduction

Want to make your timeline come alive? In this article, we will show you how to use GSAP to create a smooth scroll-animated timeline in your React app. It’s easy and fun! Follow our step-by-step guide to bring your ideas to life with simple code and cool effects. Let’s get started!

What is GSAP?

GSAP, or GreenSock Animation Platform, is a powerful tool for creating animations in web applications. It makes adding animations easy and helps them run smoothly on different devices. When combined with React, GSAP allows you to create stylish animations that enhance the user experience.

Setting Up Your React App

Before jumping into animations, you need to set up a React app. If you don’t have one yet, you can create a new one using Create React App. Here’s how:

npx create-react-app my-timeline-app
cd my-timeline-app
npm start

This command sets up a basic React app in a folder called my-timeline-app. You can replace this with any name you choose.

Installing GSAP

Next, you need to install GSAP. Open your terminal and run this command:

npm install gsap

This command adds GSAP to your app, allowing you to use it for animations.

Creating the Timeline Component

Now, let’s create a component for your timeline. Inside the src directory, create a new file called Timeline.js. Here’s a simple structure for your timeline:

import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

const Timeline = () => {
    const timelineRef = useRef(null);

    useEffect(() => {
        const timelineItems = timelineRef.current.children;
        gsap.from(timelineItems, {
            duration: 1,
            y: 50,
            opacity: 0,
            stagger: 0.2,
            ease: 'power2.out',
        });
    }, []);

    return (
        <div ref={timelineRef}>
            <div className="timeline-item">Event 1</div>
            <div className="timeline-item">Event 2</div>
            <div className="timeline-item">Event 3</div>
            <div className="timeline-item">Event 4</div>
        </div>
    );
};

export default Timeline;

In this code, we use the useRef hook to get a reference to the timeline items. When the component mounts, GSAP will animate each item, making them slide in from below.

Styling Your Timeline

To make your timeline look good, you’ll want to add some styles. Create a new CSS file called Timeline.css and add the following styles:

.timeline-item {
    background-color: #f4f4f4;
    margin: 10px 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

Now, make sure to import this CSS file in your Timeline.js file:

import './Timeline.css';

Adding Scroll Animation

To make your timeline animate as you scroll, you can modify the useEffect hook. You can listen for scroll events and trigger the animations based on the scroll position. Here’s how:

useEffect(() => {
    const handleScroll = () => {
        const scrollPosition = window.scrollY + window.innerHeight;
        Array.from(timelineItems).forEach(item => {
            const itemPosition = item.getBoundingClientRect().top + window.scrollY;

            if (scrollPosition > itemPosition) {
                gsap.to(item, {
                    duration: 1,
                    y: 0,
                    opacity: 1,
                    ease: 'power2.out',
                });
            }
        });
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, []);

In this updated code, we track the scroll position and animate each timeline item when it comes into view. This adds depth to your timeline, making it feel interactive.

Using the Timeline Component

Now that you have a timeline component, you need to use it in your app. Open the App.js file and modify it like this:

import React from 'react';
import Timeline from './Timeline';

const App = () => {
    return (
        <div>
            <h2>My Timeline</h2>
            <Timeline />
        </div>
    );
};

export default App;

Conclusion

What this really means is that you now have a scroll-animated timeline in your React app using GSAP. This simple setup allows you to create engaging content and improve how users interact with your site. Play around with different styles, animations, and content to make it your own!

For more details on GSAP features, you can check out the GSAP website. Happy coding!