Physics2D works, but with invalid property warnings

[Kenner Stross]

I've installed the physics2d plugin and I have a simple animation that is working, yet I'm getting many warning like this:

 

Quote

Invalid property ang$1$f set to 145.0818686541921 Missing plugin? gsap.registerPlugin()

 

Yes, I register the plugin. And no, I'm pretty certain there is no tree shaking because this is not inside a build environment or deployment container or anything like that - it's just a simple html page. Any ideas how a plugin could both work AND generate these warnings as if it was not working, not loaded?

[ZachSaucier]

Hey Kenner and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

These sorts of warnings just mean that there's a property that's not being recognized. In this case something named ang$1$f which is an invalid property name. If you remove that property it should work. 

 

If you need help figuring out where that's being added, please create a minimal demo of the issue in something like a CodePen. The following thread provides more information on how to do so:

 

[Kenner Stross]

Thanks for the reply, Zach. I don't think codepen is going to work because, in reality, this is Scala JS code which transpiles down to Javascript. I'll show you the (scala code) helper function I'm using, though it may not make sense to you if you're not familiar with Scala and/or Scala JS. But just in case:

 

  def physics(dur: Double, vel: Double, ang: Double) = new GSAPOptions {
    override val duration = dur
    override val physics2D = new GSAPPhysicsOptions {
        override val velocity = vel
        override val angle = ang
      }
  }

It's just a little helper function to build the javascript structure that gsap needs on the "to" call. But before we get too concerned about whether this sort of Scala to Javascript approach works, please understand: 1) It works just fine for all my other calls to "to" and "set," etc. It only gets weird when it includes the physics2D reference. 2) It's warning that it doesn't like something about "ang" and/or "angle," yet THE ANIMATION WORKS!! In other words, the angle that I am passing in is, in fact, being honored by gsap! That's the part I don't understand - how can it simultaneously say that it is a bad param AND honor/utilize that param? It seems like it's either a bad param and therefore no effect on the animation OR it's a good param and no warning. But both?!?

 

[ZachSaucier]

1 minute ago, Kenner Stross said:

I don't think codepen is going to work because, in reality, this is Scala JS code which transpiles down to Javascript.

So show us the transpiled code in a CodePen  Preferably the smallest amount necessary to reproduce the error that you're facing. 

 

2 minutes ago, Kenner Stross said:

how can it simultaneously say that it is a bad param AND honor/utilize that param? It seems like it's either a bad param and therefore no effect on the animation OR it's a good param and no warning. But both?!?

Most likely it's not. Without seeing the code it's impossible to say.

[Kenner Stross]

Actually, I found the problem. I was looking a the portion of generated js code that might be helpful, and it made me think of something. The answer (I believe) is very specific to Scala JS, but I'll post it here in case someone else runs into this.

 

My original help function built a gsap options structure inside another gsap options structure. Because of the way the javascript code was generated, that became a function call within a function call, which looked weird to gsap (for reasons that are above my pay grade). When I restructured it to get rid of the nested function calls, it worked fine. Here's the revised version of the Scala JS help function:

 

def physics(dur: Double, vel: Double, ang: Double) = {
    val po = new GSAPPhysicsOptions {
      override val velocity = vel
      override val angle = ang
    }
    new GSAPOptions {
      override val duration = dur
      override val physics2D = po
    }
  }

 

And if anyone is curious, here is the generated javascript that made gsap unhappy (before refactoring it as shown above):

 

$c_Lanim_AnimHelpers$.prototype.physics__D__D__D__Lanim_Facades$GSAPOptions = (function(dur, vel, ang) {
  var po = (function(arg$1, arg$2) {
    var prep0 = $uD(arg$1);
    var prep1 = $uD(arg$2);
    var vel$1 = prep0;
    var ang$1 = prep1;
    var $this = {};
    $this.velocity = null;
    $this.angle = null;
    $this.velocity = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(vel$1);
    $this.angle = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(ang$1);
    return $this
  })(vel, ang);
  return (function(arg$1, arg$2) {
    var prep0 = $uD(arg$1);
    var prep1 = arg$2;
    var dur$4 = prep0;
    var po$1 = prep1;
    var this$2 = {};
    this$2.duration = null;
    this$2.physics2D = null;
    this$2.duration = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(dur$4);
    this$2.physics2D = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(po$1);
    return this$2
  })(dur, po)
});
$c_Lanim_AnimHelpers$.prototype.init___ = (function() {
  $c_O.prototype.init___.call(this);
  $n_Lanim_AnimHelpers$ = this;
  return this
});