Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solublestudio/gatsby-plugin-scroll-reveal
✨ Gatsby plugin to animate your DOM elements on scroll
https://github.com/solublestudio/gatsby-plugin-scroll-reveal
gatsby gatsby-plugin sal scroll scroll-animate scroll-reveal
Last synced: 3 days ago
JSON representation
✨ Gatsby plugin to animate your DOM elements on scroll
- Host: GitHub
- URL: https://github.com/solublestudio/gatsby-plugin-scroll-reveal
- Owner: solublestudio
- License: mit
- Created: 2019-10-01T15:06:14.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T11:56:23.000Z (over 1 year ago)
- Last Synced: 2024-09-21T12:43:37.019Z (12 days ago)
- Topics: gatsby, gatsby-plugin, sal, scroll, scroll-animate, scroll-reveal
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 48
- Watchers: 3
- Forks: 12
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-plugin-scroll-reveal ✨
[](https://badge.fury.io/js/gatsby-plugin-scroll-reveal) [](https://github.com/solublestudio/gatsby-plugin-scroll-reveal/blob/master/LICENSE)
Gatsby plugin to animate DOM elements on scroll. Using [Sal (Scroll Animation Library)](https://mciastek.github.io/sal/) focus on performance less than **2.8kb**, written in vanilla Javascript.
To see how to use advanced options visit [Sal's docs](https://github.com/mciastek/sal).
**Note**: Supported IE11
## Install
`yarn add gatsby-plugin-scroll-reveal`
or
`npm install --save gatsby-plugin-scroll-reveal`
## How to use
1. Include the plugin in your `gatsby-config.js` file.
2. Add your custom `options` object (optional)
```javascript
// in gatsby-config.js
plugins: [
`gatsby-plugin-scroll-reveal`
];
```
**Note**: If you are using [Gatsby Plugin Transition Link](https://www.gatsbyjs.org/packages/gatsby-plugin-transition-link/) add this plugin first in the config.
## Options
Here is a full list of options with their default values you can use to configure this plugin.
```javascript
// in gatsby-config.js
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
}
}
];
```
## Usage
It will look for all HTML elements with a `data-sal` attribute and launch their animation when in viewport.
- `data-sal` - attribute with the animation name as value - **required**
- `data-sal-duration` - changes duration of the animation - *optional*
- `data-sal-delay` - adds delay to the animation - *optional*
- `data-sal-easing` - sets easing for the animation - *optional*
For example:
```html
```
The library supports:
- `fade`
- `slide-up`
- `slide-down`
- `slide-left`
- `slide-right`
- `zoom-in`
- `zoom-out`
- `flip-up`
- `flip-down`
- `flip-left`
- `flip-right`
## Gatsby v1
This plugin is not compatible anymore with Gatsby v1, you should update to the version 2.0.0.
## Collaborate
We are open to new functionalities or fix bugs. If you want to collaborate to improve this plugin, just make a pull request 🤗
## License
Created by [Soluble Studio](https://www.solublestudio.com/). Released under the [MIT License](https://github.com/solublestudio/gatsby-plugin-scroll-reveal/blob/master/LICENSE).