Tween object in object

[nielswijers]

Hey there,

 

Is is posible to animate a property of an child object

 

example for better explantion

var clip = {
  position: {x: 100, y:100}
}

TweenMax.to(clip, 1, {position:{x:200}})

or maybe

TweenMax.to(clip, 1, {'position.x':200})

thx in advance

[jamiejefferson]

TweenMax.to(clip.position, 1, {x:200})

[nielswijers]

Hey Jamie,

 

thx for your reply, i know thats posible

 

but imagine i have this clip and i want to do every thing in one animation

var clip = {
  rotation: 10
  position: {x:100, y:100},
  anchor: {x:0,y:0}
  alpha:1
}
TweenMax.to(clip, 1,{position:{x:200}, alpha:0)

i know i can do it like this

new TimelineMax()
  .to(clip, 1, {alpha:0},0)
  .to(clip.position, 1, {x:0},0)

but i was just wondering if there was a better way for doing this and combine it in one tween. so when i want adjust the timing i dont have to fix it on several places

[Carl]

Yes, you will need two separate tweens. You can only tween properties of the target object, not properties on child objects of the target.

 

You could create getter and setter functions like setX() and getX() on clip that would look inside the position object for you for the proper values

 

for instance create these methods inside your Clip object

function setX(val) {
    this.position.x = val;
} 

function getX() {
   return this.position.x
}

Then you could create a tween like

TweenLite.to(clip, 1, {setX:20, setY:30});

[nielswijers]

Hey Carl, thx for your replay

 

i understand your solution. it was not the one i was hoping for but it can be very solid

 

im going to implement it now.

 

and maybe later try to look for maybe an plugin for nested objects or so like

TweenMax.to(clip, 1, {nested:{position:{x:0}}, ease: Back.easeOut}

or try to hack a rewrite into it

TweenMax.to(clip, 1, {'position.x':0, ease: Back.easeOut}