Jump to content


Tween object in object

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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}
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

Link to comment
Share on other sites

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});
  • Like 1
Link to comment
Share on other sites

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}
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.