Not working on gatsby v2

[vlinas]

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;

[barjuandavis]

Have you configured your gatsby-config.js? And btw you don't have to import sal.css. It should work from the get go when configured properly.

[vlinas]

Have you configured your gatsby-config.js? And btw you don't have to import sal.css. It should work from the get go when configured properly.

Yes, I added it in gatsby-config.js and tried configuring it with and without any options with no luck..

[solubletech]

Hey @vlinas! Can you share your gatsby-config.js file?

[vlinas]

Hey @vlinas! Can you share your gatsby-config.js file?

Hey @solubletech , here's my gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Linas`,
    description: `webdev`,
    author: `@linasv`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages"
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sass`,
    'gatsby-plugin-dark-mode',
    `gatsby-plugin-scroll-reveal`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

[vlinas]

@solubletech I found the issue here. Scroll reveal doesn't work if div is wrapped in react-lazyload component

[DRD161]

I'm having the same issue as well using Styled Components. Could that cause an issue?

Gatsby Config:

module.exports = {
  siteMetadata: {
    title: `Dylan's portfolio`,
    description: `Dylan Davenport's portfolio`,
    author: `Dylan Davenport`,
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-scroll-reveal`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Dylan's portfolio`,
        short_name: `portfolio`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

[coreyward]

@vlinas @DRD161 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, leading to some of the issues you're experiencing with client-side rendered elements (e.g. LazyLoad) or JS-based CSS solutions (StyledComponents).

Here's an example using a lightweight Intersection Observer wrapper:

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

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

  return (
    <div
      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}
    />
  )
}