Undefined tween values across browsers

[iamface]

Hello,

 

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?

Thanks!

[Rodrigo]

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? 

 

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:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[iamface]

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!

[Rodrigo]

Hi,

 

I've updated the codepen in order to work with some random values and conditional logic to enforce those values:

 

See the Pen Lryab?editors=001 by rhernando (@rhernando) on CodePen

 

Happy Tweening!!