Animate elements on page scroll | Codetain - end-to-end software development

Hello there!

Finally I can share with you another post about react & gsap. As promised in the previous part - here, I’ll show you how to create animations when scrolling our page.

Let’s get started.

First, create new project by typing: 'npx create-react-app project-name'

After all dependencies are installed and created, we can download gsap library. To do that, we need to open terminal with project location and type: 'npm install gsap'

At the 1st step let’s clear the code from default things.

In App.js delete all html elements except highest div
delete unused imports
In App.css delete all classes except ‘.App’

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Now, we can use the ‘useEffect’ and ‘useRef’ hooks to make initial refs for our components. And of course, the names of variables or styling is up to you :).

Import React, { useRef,  useEffect } from ‘react’;
…
const App = () => {
  const titleRef = useRef(null);

  useEffect(() => {
	// here will be our animation
  }, []);

  return (
    <div className="App">
      <p ref={titleRef}> You can animate everything!</p>
    </div>
  );
}

After that, lets change our App.css to prepare some better styling and to make the scroll appear:

.App {
  text-align: center;
  background: #282c34;
  height: 250vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-transform: uppercase;
  font-size: 24px;
}

Next lets create a separate file animations.js to handle our animations. At the top of the file lets import a few things and apply them:

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const fromBottomToTop = ({ target, stagger, start = '0px, 50%', duration = 1, scaleX}) => {
  gsap.from(target, {
    scrollTrigger: {
      trigger: target,
      start
    },
    y: '+=50',
    autoAlpha: 0,
    scaleX,
    duration
  });
};

export default fromBottomToTop

Now, we can go back to App.js file to import our function and use it in the ‘useEffect’ hook:

import fromBottomToTop from ‘./animations’;
…
useEffect(() => {
    fromBottomToTop({target: titleRef.current, scaleX: 0.5});
  }, []);

And here we go! Just launch your app and see the results:

I encourage you to add more components and various animations. The final version is on my github repository.

https://github.com/setamyDG/react-with-gsap-part2

If you’re interested about the rest of gsap scroll properties please visit this link -> More gsap

Check it out and learn more!

Best Regards,

Daniel Gola