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

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!

Originally published at https://blog.larsbehrenberg.com.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lars 👨‍💻

Lars 👨‍💻

2 Followers

Freelance Web Developer 💻 | Always Learning 📖 | Currently Working Mostly In Gatsby 💥