Jump to content


Tween Object Properties with units

Recommended Posts

Is it possible to tween an object's property if the value of the property contains units (px, %, em, etc)? See code pen example. I'm expecting myObject.left to have a value of '200px' after 5 seconds.

See the Pen ZYRrQX by byoung (@byoung) on CodePen

Link to comment
Share on other sites

Hi Creative Tech,


You can use units for left, but a you need to define it's position first, i.e. relative, absolute.

You were also trying to tween your object left, which isn't an element, so that's why nothing was changing.


See the Pen gbKvGa by osublake (@osublake) on CodePen


Or were you trying to tween the numbers? In that case you can always append the units.


See the Pen MYXQrr by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi OSU Blake,


Thanks for the quick response. I don't want to animate/tween the actual DOM element. I simply wanted to tween a value that contains units. Your second link is more what I was aiming for, however, I dont want to have to append the unit. There is no other workaround?

Link to comment
Share on other sites

It has to be numeric, but you can use a getter / setter to transform the value.


var myObject = { 
  _left: 100,
  units: "px",
  get left() { return Math.round(this._left) + this.units; },
  set left(value) { this._left = value; }

See the Pen WbyMLE by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Thank you very much.


Any chance that I can request a new feature into TweenMax to handle the tween of units on objects without a workaround? It seems like it could be useful and built into the core. 

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.