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.
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.
- Install gatsby-plugin-scroll-reveal with yarn or npm (depending on your preference):
yarn add gatsby-plugin-scroll-revealor
npm install --save gatsby-plugin-scroll-reveal
- And add the plugin in your gatsby-config.js:
// in gatsby-config.js
// ... other plugins
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, 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:
// ... other plugins
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 = () => (
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)
For our main data-sal attribute, we have several different options:
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!
Originally published at https://blog.larsbehrenberg.com.