gsap3 "Missing plugin" issue in Gatsby project

[Boryys35 0 Likes (Newbie)]

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>

  )

}

[OSUblake 18,497 Likes (Superhero)]

You don't have to register the css plugin. Installation is covered in the docs.

https://greensock.com/docs/v3/Installation

 

Make sure ref is an element. If you need more help, make a demo of the problem on codesandbox. They have a gatsby template.

https://codesandbox.io/

 

[Boryys35 0 Likes (Newbie)]

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

[carlyshackleton 2 Likes (Newbie)]

OMG! I was having this issue with one of my Angular apps and OSUblake response "Make sure ref is an element" was so infuriating... of course ref is an element!! BUT then because I was animating the childNodes of a parent element, just for kicks, I decided to console.log the child array, and there it was! the last item on the array was NOT and element.  So, thank you OSUblake, from now on when I create a timeline from an array of elements I will make sure that each item IS definitely an element.