Scaling Misunderstanding

[Combat Kevin]

I am rewriting some software to use Pixi.js and GSAP. I have, at times, been both amazed and extremely frustrated during this journey but I know it'll be worthwhile once the transition is complete. Animating with GSAP is so much easier than trying to do those same animations (or, let's be real, really shoddy versions of the buttery smooth animations provided via GSAP) in Pixi with an update-loop. My original frustrations were trying to incorporate GSAP into my update-loop efforts within Pixi. I believe I'm beyond most of those, now, but...

 

In the attached Codepen, I have an example of a simple keyframe animation. I want the scale to also animate. If you uncomment the 2 scale lines (one in text2's timeline set and the other in the to) the rendering (text2) disappears.

 

I apologize if this has been asked and answered; however, the key words "scale" and "animate" don't yield productive results and I am at wit's end.. I've been through countless examples (converting most to GSAP v3 from GSAP v2) about keyframes, to and fromTo, and this old GSAP v2 example (which seems like it should work after taking out the css property--since that was deprecated and, I believe, fully removed from the source code).

 

This is definitely a great community! Looking forward to working with ya!  Thanks for your time!

 

Warm regards,

Kevin

See the Pen poWWYjR?editors=0011 by karts-with-freaking-lasers (@karts-with-freaking-lasers) on CodePen

[OSUblake]

Welcome to the forums @Combat Kevin

 

I'm a little unsure about you're asking here, but it sounds like you might be confusing DOM elements with PIXI objects. Please don't look at any animation code that involves HTML or SVG elements as that won't be correct for Pixi.  Some properties on Pixi objects may look the same, but they are not the same.

 

GSAP can only animate properties that are part of the Pixi object. scale is not a property of a Pixi object, rather it's a Point object, so scale would have to be animated like this.

gsap.to(someObject.scale, {
  x: 0.5,
  y: 0.5
})

// or with PixiPlugin
gsap.to(someObject, {
  pixi: {
    scale: 0.5
  }
})

 

And an animating width and height in Pixi is the same as animating scale as those are linked. So when you animate the width, Pixi automatically changes scale.x and vise versa.

 

It's definitely best to consult Pixi's documentation for properties that you can animate. Basically anything that is a number fair game. If something is a point, then you would need to do something similar to the code above.

 

http://pixijs.download/release/docs/PIXI.DisplayObject.html

 

[OSUblake]

Also, here's the docs for the PixiPlugin...

 

GreenSock | Docs | Plugins | PixiPlugin

 

[OSUblake]

And a simple keyframe demo...

 

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

 

[Combat Kevin]

I now understand how the Pixi plugin works. I am wondering if it would make sense or help others to add a type-check warning if the "start value" type and "end value" type don't match in the _addComplexStringPropTween function.

 

var _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {
  //...
  //something like:
  typeof start !== typeof end && return console.warn(`start type mismatches end type: ${typeof start === 'object' ? start.toString() : typeof start} vs. ${typeof end === 'object' ? end.toString() : typeof end}. Are you trying to set Pixi.js properties? See ___ for more information. Property will not be added to Tweens.`);
  //...
    var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),
      index = 0,
      matchIndex = 0,
      result,
      startNums,
      color,
      endNum,
      chunk,
      startNum,
      hasRandom,
      a;
  pt.b = start;
  pt.e = end;
  // The value of `start` becomes: '[@pixi/math:ObservablePoint x=0 y=0 scope=[@pixi/math:Transform position=(0, 0) rotation=0 scale=(1, 1) skew=(0, 0) ]]'
  start += ""; //ensure values are strings
  // The value of `end` becomes: '0.25'
  end += "";
  //...
},

  //...
_renderComplexString = function _renderComplexString(ratio, data) {
  var pt = data._pt,
      s = "";

  //...
  data.set(data.t, data.p, s, data);
}
  // V V V V V V 
var _setterPlain = function _setterPlain(target, property, value) {
  return target[property] = value; //DisplayObject setter for scale: expecting Observable Point; value = "0.25"
},

Just a thought, although, I recognize it's possible I'm the only one that was confused by this

 

Thank you for your help!

[OSUblake]

I don't know how much that would really help. At its core, GSAP is just a property manipulator, and can only work with numbers and strings that are properties of an object. So if you had an object that looked like this, and you tried to animate a property that doesn't exists, like foo, GSAP will warn you. 

 

let obj = {
  value: 0,
  scale: {
    x: 1,
    y: 1
  }
};

gsap.to(obj, {
  foo: 10  // Invalid property foo set to 10 Missing plugin? gsap.registerPlugin()
});

 

Now if you tried to animate scale on that object, GSAP see's there is a scale key, but it doesn't know that it's supposed to stay an object, so it's going to do what you told it to. It will change the scale object to the number 2.

 

let obj = {
  value: 0,
  scale: {
    x: 1,
    y: 1
  }
};

gsap.to(obj, {
  scale: 2,
  onComplete() {
    console.log(obj) // { value: 0, scale: 2 }
});

 

That's probably not what you meant to do, but GSAP doesn't know that. You might be saying that they are different types and GSAP should catch that, but maybe we want to change the type, like say you want to change a number to a string. This would be totally valid, and probably what the user expects, even though they are different types.

 

let obj = {
  value: 0 // number
};

gsap.to(obj, {
  value: "20%" // string
});

 

 

[Combat Kevin]

Just tossing it out. Thanks for your time.