Jump to content
Search Community

Undefined tween values across browsers

iamface test
Moderator Tag

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



I have a couple objects within a div. They each have a click handler to modify their transform property when clicked. That handler is also removed and another one added at that time. When they are clicked again, their transform property then is changed again back to the original settings. -basically making the elements 'zoom' in and out of the page.


I'm doing:

TweenLite.to(element, 1, {
	transform: 'translate3d(0,0,0)',
	webkitTransform: 'translate3d(0,0,0)',
	mozTransform: 'translate3d(0,0,0)'

to move them out. I save their initial position with jQuery's data(). I then move them back with click with:

TweenLite.to(element, 1, {
	transform: element.data().transform,
	webkitTransform: element.data().webkitTransform,
	mozTransform: element.data().mozTransform

This works great! And it works in FF, Chrome and Safari.


The 'problem' is, in FF I get a console log of 'invalid webkitTransform tween value: undefined' and in Chrome and Safari 'invalid mozTransform tween value: undefined'


Now given, these properties do not exist in the other browser, so I can see why this is thrown. But is this a bug or intended? Since everything works and it's just a dev console log, it doesn't really affect anything, but is there a way to avoid these logs? I need to change both css properties '-webkit-transform' and '-moz-transform' to ensure my functionality forks in all browsers, but it seems like GSAP does not like me altering both/all properties.


Or is there another way I should be tweening these properties to avoid this log error?


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


The main issue here are the properties you're passing in the config object. GSAP's CSS Plugin handles every vendor prefix for you, so users don't have to worry about them, keeping code short, simple and consistent with the original syntax that came from the flash version of the engine.


Also CSS transform properties have their own syntax, whether you're translating in 2D or 3D:

  • translateX => x
  • translateY => y
  • translateZ => z
  • rotateX => rotationX
  • rotateY => rotationY
  • rotateZ => rotationZ

The properties not mentioned are the same in CSS and GSAP. In this regard you also don't have to worry about creating matrices or anything like that, again the CSS Plugin does that for you. So to animate the element's x and y position the syntax will be like this:

TweenLite.to(element, 1, {x:200, y:200});

Nice and easy, isn't it?  8-)


Finally in the scenario you're describing I believe that the best approach would be to create a paused tween for the element and play/reverse that instance on the respective event handler in order to avoid creating a new instance all the time, although I'm not sure of which properties you want to animate I created a simple codepen using x and y:


See the Pen Lryab by rhernando (@rhernando) on CodePen


Feel free to fork and adapt it to your scenario. Also check this post in order to learn how to create a simple reduced codepen demo, which is always the best way to give fast and accurate support to users:





  • Like 4
Link to comment
Share on other sites

Ah, I didn't even think about tweening 'z' which is the 3D transform I'm wanting. Also, I didn't consider play() reverse().. Currently I'm having the object go back to the same properties, so reverse() would be ideal, but I make make it a new random location on every click.


But this is good to know I can clean up my work a little. Thanks!

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.
  • Create New...