# 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)](https://mciastek.github.io/sal/), 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](#install-and-implement-the-plugin-in-your-gatsby-configjs) 
-  [How to enable animations in your components](#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**:

```jsx
// 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](https://www.gatsbyjs.org/packages/gatsby-plugin-transition-link/?__hstc=247646936.5a70aa85a50443989ce365cee06359b1.1606179439689.1608090555014.1608883300963.15&__hssc=247646936.2.1608883300963&__hsfp=2249640406) as well as this plugin, make sure to add this plugin before [Gatsby Plugin Transition Link](https://www.gatsbyjs.org/packages/gatsby-plugin-transition-link/?__hstc=247646936.5a70aa85a50443989ce365cee06359b1.1606179439689.1608090555014.1608883300963.15&__hssc=247646936.2.1608883300963&__hsfp=2249640406) 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:

```jsx
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.

```jsx
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](https://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](https://larsbehrenberg.com/) or [Twitter](https://twitter.com/codetraveling) 🙂  And if you like to read more, make sure to check out my other posts on my [blog](https://blog.larsbehrenberg.com)!