Missing Plugin? In react components

[JPM82]

Doing some animations for my hero/nav section.  Everything works fine in my Hero component, but for some reason not working in the Nav component.  I keep getting this error:  " Invalid property opacity set to 1 Missing plugin? gsap.registerPlugin()" .  This is my code for the Nav component:

import React, { useEffect, useRef } from "react";

import { gsap } from "gsap";

import "./index.scss";

import { ReactComponent as Logo } from "../../assets/images/logo_white.svg";

import { NavLink } from "react-router-dom";

import { Link } from "react-scroll";

 

const Nav = () => {

const navItem = useRef();

const navTl = gsap.timeline({

defaults: { ease: "power4.out", duration: 1.2 },

});

 

useEffect(() => {

navTl.to(

navItem.current,

{

opacity: 1,

stagger: {

each: 0.3,

},

},

"nav"

);

}, [navTl]);

 

return (

<nav>

<div className="nav-bar">

<div className="nav-bar__inner">

<NavLink to="/" ref={navItem} className="nav-link">

<Logo />

</NavLink>

<div className="nav-links">

<ul>

<Link

ref={navItem}

className="nav-link"

to="about"

spy={true}

smooth={true}

duration={500}

>

About

</Link>

<Link

ref={navItem}

className="nav-link"

to="work"

spy={true}

smooth={true}

duration={500}

>

Work

</Link>

<Link

ref={navItem}

className="nav-link"

to="contact"

spy={true}

smooth={true}

duration={500}

>

Contact

</Link>

</ul>

</div>

</div>

</div>

</nav>

);

};

 

export default Nav;

 

Not sure what's going on here.  I've configured it the same as my other component which works just fine.   Am I missing something here???

 

[Cassie]

Hey there!

.current may be what you're looking for?
 

Quote

In order to avoid targeting a null element, we can use the useEffect hook. This hook tells React that our component needs to do something after rendering.
 

function App() {
  // store a reference to the box div
  const boxRef = useRef();

  // wait until DOM has been rendered
  useEffect(() => {
    gsap.to(boxRef.current, { rotation: "+=360" });
  });
  
  // DOM to render
  return <div className="box" ref={boxRef}>Hello</div>;
}

In this example, React will first render the box element to the DOM, then GSAP will rotate the box 360deg.

 

 This article is also pretty helpful - 

If you need more help can you possibly pop together a minimal demo for us? Thank you.

[GreenSock]

Yep, you might want to console.log() your target right before your tween to make sure it's what you think it is. The warning you're getting just means that whatever target you're tweening doesn't actually have that property.

 

It looks like you're using the same ref for a bunch of different elements. I'm not a React guy, but I assume that's not valid, right? Like Cassie said, a minimal demo would really help.