implementing scroll animations with gatsby and gatsby-plugin-scroll-reveal

Question

I am trying to add scroll animations to my gatsby site. the plugin I am using, sal is supposed to be able to support animation when the element comes into view and/or when the element leaves. I am trying to add a slide-in animation to the element when it is in view but am sure how to get this to work. When i try to query the element it show up as null. Anyone know how to get this to work.

p.s. everything is set up correctly in gatsby config, i can get animations to work but just not the sal:in and sal:out animations

sal docs

const IndexPage = () => {
  const element = document.querySelector(".animated")

  element.addEventListener("sal:in", ({ detail }) => {
    console.log("entering", detail.target)
  })
  return (
    <Layout>
      <Head title="Home" />
      <div className={indexStyles.wrapper}>
        <h1 className={indexStyles.heading}>Hello World.</h1>
      </div>
      <div className={indexStyles.grid}>
        <div className={indexStyles.item1}>
          <img alt="pink background" src={HQpink}></img>
          <div className={`${indexStyles.blurb} animated`}>
            <div className={indexStyles.flexHeader}>
              <div className={indexStyles.myFace}>
                <img alt="ren" src={Ren}></img>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}

score 0 · Answer 1 · answered Sep 23 '20 at 09:07

Is that all of your code? Then you haven't specified the element that you want to apply the scroll reveal effect to.

Suppose you want to animate the wrapper. Add custom attributes to it like below:

<div data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-in" className={indexStyles.wrapper}>
  <h1 className={indexStyles.heading}>Hello World.</h1>
</div>

implementing scroll animations with gatsby and gatsby-plugin-scroll-reveal

1 Answers1