tween same name properties, same time

[yomotsu]

Hi, I am trying to make with PIXI.js and three.js.

 

Display-object in those libs has following properties and names are the same like, position.x, scale.x

 

- position

- rotation

- scale

 

Is it possible that tween these on a same timeline instance?

currently the codepen demo is woking 2 separated timeline instance.

 

Thanks in advance.

See the Pen YPdXYE?editors=101 by yomotsu (@yomotsu) on CodePen

[GreenSock]

Absolutely! And you don't have to use the long-hand syntax like that. I'd recommend the convenience methods. Here's a comparison:

//YOUR OLD CODE:
var timeline1 = new TimelineMax();
timeline1.append( new TweenMax( mySprite.position, 10, { x : 100 } ) );
timeline1.play();

var timeline2 = new TimelineMax();
timeline2.append( new TweenMax( mySprite.scale, 10, { x : 2 } ) );
timeline2.play();

And the revised code:

//BETTER:
var timeline1 = new TimelineMax();
timeline1.to( mySprite.position, 10, { x : 100 } );
timeline1.to( mySprite.scale, 10, { x : 2 }, 0 );

I'd highly recommend that you look at these:

http://greensock.com/position-parameter

http://greensock.com/sequence-video

 

Trust me: once you get comfortable with the API, you're gonna feel really powerful

 

 

[yomotsu]

Thank you for the advice.

 

It's what I was looking for and looks efficient!

I should have checked the tutorials before anyway.

 

thanks again!