solublestudio / gatsby-plugin-scroll-reveal Goto Github PK

✨ Gatsby plugin to animate your DOM elements on scroll

License: MIT License

JavaScript 100.00%

gatsby-plugin gatsby scroll sal scroll-reveal scroll-animate

gatsby-plugin-scroll-reveal's Introduction

gatsby-plugin-scroll-reveal ✨

Gatsby plugin to animate DOM elements on scroll. Using Sal (Scroll Animation Library) focus on performance less than 2.8kb, written in vanilla Javascript.

To see how to use advanced options visit Sal's docs.

Note: Supported IE11

Install

yarn add gatsby-plugin-scroll-reveal

npm install --save gatsby-plugin-scroll-reveal

How to use

Include the plugin in your gatsby-config.js file.
Add your custom options object (optional)

// in gatsby-config.js
plugins: [
  `gatsby-plugin-scroll-reveal`
];

Note: If you are using 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.

// 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:

<div
  data-sal="slide-up"
  data-sal-delay="300"
  data-sal-easing="ease"
></div>

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. Released under the MIT License.

gatsby-plugin-scroll-reveal's People

Contributors

Stargazers

Watchers

Forkers

luisduenas jordanliu hannes1 mzane42 ju314ter hektik-digital joyfulelement leoperez dspears vvdboogaard optics-consulting

gatsby-plugin-scroll-reveal's Issues

sal animations don't work alongside react-window

When I use this plugin alongside react-window, elements stop rendering and the solution appears to be to disable animations.

Great plugin by the way 👍

rootMargin

Is it possible to specify rootMargin for only one animated component?

Plugin don't work at all.

Hi, i followed your example, but nothing happens when scrolling.

Plugin does not work together with gatsby-plugin-transition-link

Hey! I appreciate the plugin you have created, but there is some issue which I cannot solve for myself and thought that maybe there is a problem in the code of yours.

I am developing a static website using Gatsby and I have these two plugins:

gatsby-plugin-scroll-reveal
gatsby-plugin-transition-link

Separately each plugin works just fine, but scroll reveal stops working after a transition to another page. It does work when I reload the page manually but not after there has been a transition.

I am not using any crazy configuration,, it is a very basic site. This is the second project I have seen this issue with.

Maybe there is some project configuration I must make for these plugins to work together?

Thank you a lot!

Not working on gatsby v2

Hey guys, I can't make this plugin to work...

When I import sal.css from node_modules every div with data-sal properties just disappear. Am I missing something?

import React from "react"
import Images from '../images'
import '../../../node_modules/sal.js/dist/sal.css'

const ProjectsBox = props => (
    <div data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease">
        <Images filename="test.jpg"/>
    </div>
);

export default ProjectsBox;

Scroll reveal anim only once with use of Gatsby AniLink

Hi there, nice plugin !

It works well the first time my home page is loaded to show a banner with zoom-in animation.
But then if I go to another page and come back to home page using a Gatsby AniLink animation,
Scroll reveal anim is not fired.
It seems like the plugin doesn't know the page is reloaded.
It works well if I use a traditional Gatsby Link instead of AniLink.

Here my banner code :

import Typewriter from 'typewriter-effect';
import '../assets/sass/main.scss';

class Banner extends Component {
  constructor(props) {
    super(props);
    this.state = { writer: null };
    this.startAnim = this.startAnim.bind(this);
  }

  componentDidMount() {
    console.log('componentDidMount');
    document.addEventListener('sal:in', this.startAnim);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    document.removeEventListener('sal:in', this.startAnim);
  }

  startAnim() {
    console.log('start anim');
    this.state.writer.start();
  }

  render() {
    return (
      <section id="banner">
        <div data-sal="zoom-in" className="content">
          <Typewriter
            onInit={typewriter => {
              this.setState({
                writer: typewriter,
              });
              var delay = 20;
              var pause = 500;
              typewriter
                .changeDelay(delay)
                .pauseFor(pause * 2)
                .typeString('<header><h2>Bonjour et bienvenue</h2></header>');
            }}
          />
        </div>
      </section>
    );
  }
}

export default Banner;```

Any tips plz ?

Where to set up disabling animations on mobile

As here I would like to set up sal to disable animations below ceratin viewport (for example 768px). Where should I include it in a gatsby project?

I feel like it should be placed inside gatsby-browser.js, but then "sal is not defined".

Example code, copied from the link provided above.

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset({
      selector: 'animated-element',
      once: true,
    });
  } else {
    animation.reset({
      // some other options
    });
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

Content disappears when toggling Color Mode with Chakra-UI

animate out?

Is there an option to animate out a component when its about to go out from the view port?

It seems that gatsby-plugin-scroll-reveal isn't compatible with version3.0 Gatsby.js

I am trying to install gatsby-plugin-scroll-reveal to my Gatsby application. My Gatsby version is "gatsby": "^3.5.0". It seems that it isn't compatible with this version of Gatsby? Can I know how to fix it?

No PostCSS Config found in: <path>/node_modules/sal.js/dist

Generating development JavaScript bundle failed

No PostCSS Config found in: <MY_PATH>/node_modules/sal.js/dist

File: ../../node_modules/sal.js/dist/sal.css

I'm using yarn workspaces. Any idea what's wrong?

Support React 17, 18

Right now, this plugin can not be used with React 17+ due to the peer dependency pointing to 16.x.x.

During installation of the dependency we therefore get an error.

Would be great to support React 17, 18!

Better Mobile Support

"gatsby-plugin-scroll-reveal": "0.0.7"

Plugin doesn't work on any mobile browser, animation doesn't fire on scroll.
Hope it will be better support on mobile.

Animation won't trigger when same page is being loaded

Thanks for providing this plug and play solution.

I'm having some trouble with animation not triggering when the same page is being reloaded. Let's say I'm on the homepage and I click a link in the navigation menu that leads to the same page, then the animation will not trigger and the content remains with 0 opacity.

Is there any easy fix?

Text Disappears After Page Reroute

I am resolving gatsby-plugin-scroll-reveal in my gatsby-config.js file, I have it installed in my node_modules, and it is working initially. The issue I'm encountering is that when I go to an interior page, then back to the home page, where I have text animating up using the plugin, the text is gone and I can't find anything in the source that would be causing it to do that.

Here is my hero.js component:

import React from "react"

const IndexHero = () => (
  <footer>
    <div className="container">
        <div className="row" style={{height: '77vh'}}>
            <div className="col-md-12 col-s-12 my-auto" style={{margin: '0 auto'}}>
                <p className="special" style={{color: '#EE4E31',}} data-sal="slide-up" data-sal-delay="250" data-sal-easing="ease-in-out">Hi, my name is</p>
                <h1 style={{fontStyle: 'italic', marginTop: 0}} data-sal="slide-up" data-sal-delay="500" data-sal-easing="ease-in-out">Elijah Kleinsmith</h1>
                {/* <hr style={{maxWidth: 475, margin: 0}}/> */}
                <p style={{maxWidth: 575, marginTop: '1.5vw', fontSize: 'calc(0.8rem + 0.7vw)', marginLeft: 2, marginBottom: 30}} data-sal="slide-up" data-sal-delay="750" data-sal-easing="ease-in-out">
                Some text...
                </p>
                <a href="mailto:[email protected]">
                    <div data-sal="slide-up" data-sal-delay="1000" data-sal-easing="ease-in-out">
                    <button
                        className="special"
                        style={{
                            padding: '12px 30px',
                            fontSize: 14,
                            backgroundColor: 'transparent',
                            color: '#EE4E31',
                            borderColor: '#EE4E31',
                            textTransform: 'uppercase',
                            border: '1px solid',
                            transition: 'all 400ms'
                        }}
                    >
                        Get In Touch
                    </button>
                    </div>
                </a>
            </div>
        </div>
    </div>
  </footer>
)

export default IndexHero

One other strange thing: any time I set data-sal-delay value to above 1000, it runs at the default delay instead of the set delay time.

Any help is very much appreciated.

Thank you for building this!