Scroll reveal anim only once with use of Gatsby AniLink

[laugre]

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 ?

[solubletech]

Hi! Sounds like the data-sal animation is faster than the page transition animation. Try adding data-sal-delay for the plugin to wait until the page transition ends.

[haohanqi]

I try to add data-sal-delay, doesn't matter how much time I provide, it still doesn't work. I think maybe the reason is scroll animation doesn't trigger at all. Any solutions ?

[ImPhoenixDev]

"gatsby-plugin-scroll-reveal" Must go before "gatsby-plugin-transition-link". On your gatsby config file