Plugin don't work at all.

[rzubrycki]

trafficstars

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

[solubletech]

Hi @rzubrycki, can you explain us more about your problem?. Maybe this plugin fail if you are using other plugins like transition-link.

[rzubrycki]

No, i don't use it. this is my dependencies:

"dependencies": {
    "@rhysforyou/gatsby-plugin-react-helmet-async": "^0.1.3",
    "formik": "^2.1.4",
    "gatsby": "^2.20.8",
    "gatsby-background-image": "^0.10.2",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-google-analytics": "^2.2.2",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-robots-txt": "^1.5.0",
    "gatsby-plugin-sass": "^2.2.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-sitemap": "^2.3.1",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-transformer-sharp": "^2.4.3",
    "node-sass": "^4.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet-async": "^1.0.4",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.2",
    "typeface-alata": "^1.1.3",
    "yup": "^0.28.3"
  },

After start of an app, i see ease-in animation on header and then nothing happen on scroll. Chrome Version 80.0.3987.163

[solubletech]

Hi! We can't see the plugin in the dependencies. Can you show your gatsby-config.js plugins?

[coreyward]

@rzubrycki You might have better luck with a different solution. There's nothing Gatsby-specific about this behavior, and the dependency doing the heavy lifting uses a very non-React approach.

import { useInView } from "react-intersection-observer"

const AnimateIn = ({ threshold = 0.15, triggerOnce = false, ...remainingProps }) => {
  const [ref, inView] = useInView({ threshold, triggerOnce })

  return (
    <div
      ref={ref}
      style={{
        // adjust these as desired
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : 100}px)`,
      }}
      {...remainingProps}
    />
  )
}

Then just wrap any components you want entrance animations on with this component, overriding the default threshold and triggerOnce values as desired:

<AnimateIn triggerOnce={true}>
  <h1>Hi Mom!</h1>
</AnimateIn>

This is much easier to reason about, doesn't couple itself to Gatsby, and you can easily extend or modify it to do anything else you need, all without adding a bunch of additional dependencies to your client-side code. You can even use this approach to auto-play videos when they're in view and pause them when they're not:

import { useInView } from "react-intersection-observer"

const AutoPlayingVideo = ({ threshold = 0.15, ...playerProps }) => {
  const [ref, inView] = useInView({ threshold })

  useEffect(() => {
    if (inView) {
      ref.current?.play()
    } else {
      ref.current?.pause()
    }
  }, [ref, inView])

  return (
    <video
      style={{
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : 100}px)`,
      }}
      ref={ref}
      autoPlay
      playsInline
      muted
      loop
      {...playerProps}
    />
  )
}

[Trunksome]

@coreyward Thank you so much. I experienced strange problems with the plugin - your approach works much better. In your first snipped though, you forgot to add "ref={ref}" to the div.

[coreyward]

@Trunksome Fixed!