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.
Install gatsby-plugin-scroll-reveal with yarn or npm (depending on your preference):
yarn add gatsby-plugin-scroll-reveal
ornpm install --save gatsby-plugin-scroll-reveal
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!