Text Disappears After Page Reroute

[elijah-io]

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!

[joyfulelement]

Encountered the similar issue as well. When the same page is re-rendered or re-routed with gatsby <Link>, all the element wrapped by the

<div data-sal-*="..." ...>
    ...
</div>

will disappear and does not reveal upon scroll.

That is, those elements seems either not initialized or were initialized in the bad state.

Any guidance on how to resolve this would be much appreciated!

[nlenaerts]

I had the same problem and I just added the dependency "sal.js" to my page and started the initialization with a useEffect.

import sal from 'sal.js';

const IndexPage = () => {
  useEffect(() => {
      sal();
    }, []);

  return (
    <div>
      <div data-sal="slide-left">Hello</div>
    </div>
  )
}

[joyfulelement]

I had the same problem and I just added the dependency "sal.js" to my page and started the initialization with a useEffect.

import sal from 'sal.js';

const IndexPage = () => {
  useEffect(() => {
      sal();
    }, []);

  return (
    <div>
      <div data-sal="slide-left">Hello</div>
    </div>
  )
}

Hi @nlenaerts could you help elaborate how import sal from 'sal.js' work in the context of using gatsby-plugin-scroll-reveal? My impression is gatsby-plugin-scroll-reveal does not explicitly made sal.js available to JSX in gataby. Thanks

[ImPhoenixDev]

I had the same problem and I just added the dependency "sal.js" to my page and started the initialization with a useEffect.

import sal from 'sal.js';

const IndexPage = () => {
  useEffect(() => {
      sal();
    }, []);

  return (
    <div>
      <div data-sal="slide-left">Hello</div>
    </div>
  )
}

This solution worked for me! Thanks!