Invalid property: [xyz] set to "abc" / Missing plugin? gasp.registerPlugin()

[iamsebastn]

Hey GSAP-Folks! 
gsap in combination with React is a fairly new topic for me. And I'm encountering warnings, that I've never saw before. (Attached below)
Can somebody may explain me, what those mean? I just try to animate the yPercentage & width of an element
And yeah, at the top of the file, I imported gsap like 

import { gsap } from 'gsap'

Although when I put ...from 'gsap/all' it doesn't work. 

Here's a nearly similar animation in comparison to what I want to achieve with HTML, CSS & JS: 
https://codesandbox.io/s/ancient-framework-bqb7gw?file=/src/index.js

This works fine..

Hope, somebody can may explain me that weird warning. Thank you in advance!

[Rodrigo]

Hi,

 

Do you have an example where this doesn’t work? As you mentioned the sandbox you provided does work as expected.

 

You also mention that you’re using react, when using GSAP in a react environment we strongly recommend using GSAP Context

https://greensock.com/docs/v3/GSAP/gsap.context()

 

You should take a look at the resources in this page as well

Finally we have some starter templates for using GSAP in react, you can fork this one in order to create a minimal demo 

https://stackblitz.com/edit/gsap-react-basic-f48716
 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, without a minimal demo it's tough to diagnose but my best guess is that you're literally trying to animate a React Ref object itself rather than a DOM element. Like:

// bad
gsap.to(ref, {...});
              
// good
gsap.to(ref.current, {...});

So when GSAP tries to find the "height" property, for example, it doesn't exist.

 

If you still need help, please provide a minimal demo (CodePen, Stackblitz, or CodeSandbox) 👍

[iamsebastn]

14 hours ago, GreenSock said:

Yeah, without a minimal demo it's tough to diagnose but my best guess is that you're literally trying to animate a React Ref object itself rather than a DOM element. Like:

// bad
gsap.to(ref, {...});
              
// good
gsap.to(ref.current, {...});

So when GSAP tries to find the "height" property, for example, it doesn't exist.

Yep! That's it. I forgot about the .current. Dayum! Thank you very much!