Jump to content
Search Community

Invalid property [prop] set to [value] Missing plugin?

bigmamainthemud test
Moderator Tag

Recommended Posts

A few questions for you...

  1. Do you have a demo you can share? It's just super difficult to troubleshoot blind. A codepen would be great (the simpler the better)
  2. Are you animating DOM elements or something else? It almost sounds like maybe you're animating a canvas library like EaselJS(?)
  3. What version of GSAP are you using? Please make sure you're on the latest (3.0.5 right now)
  4. Are you positive that your target actually has those specific properties? The message you quoted should only happen if those properties aren't found on the target of your tween. 

Once I see a demo, I'm pretty confident I'll be able to get you a solid answer. 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

FYI, I'm working on a single page application that uses gsap pretty heavily. There's lots of games and animations in it. While converting it from gsap 2 to 3, I got a lot of those Invalid property warnings until it was completely converted. I banged my head against the wall a few times trying to figure out if there was something wrong with my code. I ended up just moving on to the next feature that uses gsap, and when I was done no warnings at all.

Link to comment
Share on other sites

The invalid property warning typically means that either:

  1. You're trying to animate a property that requires a plugin, but you forgot to load the plugin
    -OR-
  2. The plugin got dumped by your build tool (tree shaking). The solution there is to make sure you gsap.registerPlugin( PLUGIN )
    -OR-
  3. You're trying to animate a property that simply doesn't exist on the target. For example, if you try to tween "someWeirdProperty" of a DOM element (there's no such property). 
    -OR-
  4. You had an old version of GSAP that would console.warn() that message when the target of your tween didn't exist at all (empty). Solution: update.

I'm glad to hear you don't see the warnings at all anymore. :)

 

Now that you've got the project ported over, how is GSAP 3 feeling to you @aashby13? Hopefully you're past the learning curve and dig it now, but let us know if there are any rough edges. 

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Transitioning to version 3 was pretty easy. You guys have the best documentation of any library I've ever worked with. I may be new to the forums, but I've been using GSAP since the good ol' Flash days. Love it! I was super excited to dive into GSAP3. I code in Typescript a lot and really appreciate having proper typings. I also use NPM, so the improved NPM support is great. Better intellisense, yadda, yadda, yadda... I could go on and on.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 years later...

Im getting a console error that says "Invalid property effectVelocity set to 0.06666666666666667 Missing plugin? gsap.registerPlugin()" I'm just using TweenMax and it just started doing this. Im using DOM and canvas to get the animation. I have noticed if I shrink the height of the window it functions properly but I still get the invalid effectVelocity.

 

https://toddportfoliotest.000webhostapp.com/dist/index.html

 

This is the im using that targets the TweenMax

class WrapEffect {
  constructor(material) {_defineProperty(this, "update",

    isScrolling => {
      // update velocity
      this.scrollingContainer =
      this.scrollingContainer ||
      document.scrollingElement ||
      document.documentElement;
      this.velocity =
      (window.scrollY || this.scrollingContainer.scrollTop) - this.oldScrollTop;
      this.oldScrollTop = window.scrollY || document.documentElement.scrollTop;

      // ease the effect velocity
      if (this.effectTween) {
        this.effectTween.kill();
      }
      if (
      this.velocity !== 0 ||
      this.material.uniforms.effectVelocity.value > 0.0)
      {
        this.effectTween = TweenLite.to(this, 0.5, {
          effectVelocity: isScrolling ? Math.abs(this.velocity) / 15 : 0,
          onUpdate: () => {
            this.material.uniforms.effectVelocity.value = this.effectVelocity;
          },
          ease: Power2.easeOut });

      }
    });this.material = material;this.oldScrollTop = 0;this.velocity = 0;}}

 

Screen Shot 2022-05-18 at 10.45.18 AM.png

Link to comment
Share on other sites

Hi there Todd,


That error usually means your element doesn't have that property.

In your case 'this' doesn't have a property of effectVelocity
 

If you need more help - Would you please start a new thread and provide a very simple CodePen or CodeSandbox that demonstrates the issue?

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

I also noticed that you're using deprecated syntax. Check out the migration guide here.

 

https://greensock.com/3-migration

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.
×
×
  • Create New...