The easiest way to do scroll animations in GatsbyJS

One thing that many of my clients are asking for these days is to include slide-in, pop up, or some other kind of animation on their website.

And you can go ahead and write the CSS yourself or use a more React-oriented solution like react-intersection-observer. But in this example, I would like to show you a shortcut when the budget is tight.

A gatsby community plugin called gatsby-plugin-scroll-reveal.

Under the hood, it uses the Sal (Scroll Animation Library), which focuses on performance and is less than 2.8kb, written in vanilla Javascript. Let's get started!

Note: IE11 is supported

Table Of Contents

• Install and implement the plugin in your gatsby-config.js
• How to enable animations in your components

Install and implement the plugin in your gatsby-config.js

The setup is quite simple, as with most Gatsby plugins.

1. Install gatsby-plugin-scroll-reveal with yarn or npm (depending on your preference): yarn add gatsby-plugin-scroll-reveal or npm install --save gatsby-plugin-scroll-reveal

2. And add the plugin in your gatsby-config.js:

// in gatsby-config.js
plugins: [
    // ... other plugins
  {
    resolve: `gatsby-plugin-scroll-reveal`,
    options: {
        threshold: 1, // Percentage of an element's area that needs to be visible to launch animation
        once: true, // Defines if animation needs to be launched once
        disable: false, // Flag for disabling animations

        // Advanced Options
        selector: '[data-sal]', // Selector of the elements to be animated
        animateClassName: 'sal-animate', // Class name which triggers animation
        disabledClassName: 'sal-disabled', // Class name which defines the disabled state
        rootMargin: '0% 50%', // Corresponds to root's bounding box margin
        enterEventName: 'sal:in', // Enter event name
        exitEventName: 'sal:out', // Exit event name
    }
  }
];

Note: If you are using Gatsby Plugin Transition Link as well as this plugin, make sure to add this plugin before Gatsby Plugin Transition Link in the config.

Note, that what you see here are the default options for the plugin.

If you don't want to change any of them, you can also include the plugin without options to keep your gatsby-config.js cleaner:

plugins: [
    // ... other plugins
  `gatsby-plugin-scroll-reveal`,
];

How to enable animations in your components

Now, we only need to let gatsby-plugin-scroll-reveal know, which components we would like to animate.

We do this by giving the wrapper div of our component some data attributes.

const YourFunction = () => (
    <YourComponent
      data-sal="slide-up"
        data-sal-duration="2000" // changes duration of the animation (from 200 to 2000 ms)
      data-sal-delay="300" // adds delay to the animation (from 5 to 1000 ms)
      data-sal-easing="ease" // sets easing for the animation (see easings.net for reference)
    >
    {children}
    </YourComponent>
)

For our main data-sal attribute, we have several different options:

• fade
• slide-up
• slide-down
• slide-left
• slide-right
• zoom-in
• zoom-out
• flip-up
• flip-down
• flip-left
• flip-right

And for data-sal-easing, **we can choose from several different options as well. You can find a list here at easings.net.

And that concludes this tutorial for today! SAL does all of the heavy lifting for us and with less than 2.8 kb bundle size, there is not much that we can complain about if we are in need of a quick and easy to implement solution.

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!