["Missing plugin" issue in Gatsby project]

@OSUblake You're right, ref wasn't an element. Thank you so much for the clue!

["Missing plugin" issue in Gatsby project]

Recently, I created gatsby project and I wanted to implement show animation to a card component.

The problem comes when my 'react-intersection-observer' detects when a card appears on a screen. Then gsap gives me warning with content: 'Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()' instead of animating my card component.

I've already read many topics about this issue. I've tried to use 'gsap.registerPlugin()' function or to put 'CSSPlugin' to 'const plugins' but they don't solve the issue.

I see the same issue when I use properties like: 'opacity' instead of 'autoAlpha'.

I hope you'll point what is an issue here!

There is code of my card component:

export default function Card({ number, title, text, fixed, ...props }) {

  const [ref, inView] = useInView({ threshold: 0.2, triggerOnce: true })

 

  function show() {

    gsap.registerPlugin(CSSPlugin)

    const tl = gsap.timeline()

    tl.set(ref, { autoAlpha: 0 }).to(ref, { duration: 1, autoAlpha: 1 })

  }

 

  useEffect(() => {

    if (!inView) return

 

    show()

  }, [inView])

 

  return (

    <StyledCard ref={ref} {...props}>

      <ImageWithMask as={Img} fixed={fixed} brightValue={0.5} />

      <StyledContent>

        <StyledSmall>{number}</StyledSmall>

        <Heading style={{ textAlign: "right" }}>{title}</Heading>

        <Paragraph className="paragraph" color={paragraphColor.grey}>

          {text}

        </Paragraph>

      </StyledContent>

    </StyledCard>

  )

}