Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Boryys35

"Missing plugin" issue in Gatsby project

Recommended Posts

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>
  )
}
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×