How to Create Reusable Buttons to Trigger GSAP Animations in React!

How to Create Reusable Buttons to Trigger GSAP Animations in React!

Cat Ballar's photo
Cat Ballar
·

5 min read

I was determined to learn how to implement GreenSock animations into my shiny new portfolio/blog, and I discovered how to make this nifty component.

Step 0: npm i/yarn add the required dependencies:

* React
* gsap

I am assuming you already have your base file/page you would be importing your ScrollBtn component into.

Step 1: Create your button component

Make a ScrollBtn.js file in your Components folder.

Step 2: Import GSAP and the ScrollToPlugin

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

Step 3: Register the ScrollToPlugin

This is an important step in the process. If you do not register the plugin, your app will fall over and you will be left wondering why.

(Totally not speaking from experience.)

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

gsap.registerPlugin(ScrollToPlugin);

Step 4: Create your button!

This component will call upon the use of props! This is the key to having it be reusable. All you need to do is give your target components/sections an id.

Here is the base of the component:

const ScrollBtn = (props) => {
    return(
        <div onClick={handleClick}>
            <p>Click to scroll</p>
        </div>
    );
};

export default ScrollBtn

You will notice there is an onClick attribute to our div/button.

Let's create that function now!

Step 5: Create trigger functionality

This is where our ScrollToPlugin comes in.

Above the return statement, create a function called handleClick and pass in e for "event" since this is an event listener.

Don't forget to add e.stopPropagation() so that if your user -- for some odd reason or another -- hits the button repeatedly, the events won't bubble up/pile up on top of each other, which would really hurt your flow and experience.

const ScrollBtn = (props) =>{
    const handleClick = (e) =>{
        e.stopPropagation()
    })
 }
 return( ...)

Finally, add gsap and scrollTo functionality:

const handleClick = (e) =>{
    e.stopPropagation()
    gsap.to(window, {
        duration: 1,
        scrollTo: {
            y: `${props.target}`,
            offsetY: 70,
        }
    })
}

There's quite a bit to explain here.

First, according to the gsap syntax, we declare our overall target element that will be animated– in this case it's the entire window.

"window" is a reserved keyword in JavaScript by default, that targets the user's viewport.

Next, we declare our actions:

  • We want this to run fairly fast. By setting the duration to 1, it will take about 1 second for the animation to complete.

    • I would recommend using a number between 0.5 and 2: you don't want the scroll to go so fast it gives the user a bit of vertigo just by glancing at your site, nor would you want it to take for. eh. ver. to get to your target section. *scrollTo is our main action, and it has its own set of keys.
    • For this we'll keep it simple and only declare our y -axis target and the offsetY so that the scroll doesn't stick the target section to the very top of our browser, but rather, off about 70 pixels to put it in a good space between the address bar and itself. (Spacing– padding and margin-- are very important elements to consider in UX/UI design.)

    Our y value is encased in a string literal since we will be tying this component to the base page via the React prop method. This is how components in React can communicate with each other throughout the app.

Now, it's showtime!

Step 6: import your ScrollBtn component into your base file/page

In this case, I created a "Components" directory beforehand, within the src directory, where my base file is located.

import ScrollBtn from './Components/ScrollBtn';

Note that you do not need to import gsap again– unless, of course, you're using a different animation for this page.

##Step 7: Make sure you confirm the id of the target section

Let's say the section id is "section-1". This is how I would tie our ScrollBtn to this page:

Remember y: ${props.target} ? Here's how it works:

<ScrollBtn target="#section-1" />
    (...)
<div id="section-1">...</div>

I added the "#" because we are targeting an id.

If all goes well, your button from wherever it is will trigger a scroll down or up to where "#section-1" is.

Here's a link to a working example in CodeSandbox: codesandbox.io/s/gsap-scroll-btn-kwec2?from..

That's it! I hope that this tutorial was helpful to you!

Let me know if it was by sharing this post on social media!

Don't forget to tag me: @catvscode!

ReactGSAPTutorialJavaScript