Jump to content
GreenSock

mattfordham

How to tween CSS3 Transform properties?

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

Hi there, I am attempting the following:

 


TweenMax.to( target, 5, { css: { "-webkit-transform" : "translate3d(1000px, 0px, 0px)" }})

 

This doesn't apply a tween, it simply sets the transform properties immediately. Is there any way to tween the value?

 

 

Thanks!

Link to comment
Share on other sites

The CSSPlugin doesn't support 3D transforms yet, but it will soon. In the mean time, you can manually tween the values using an onUpdate kinda like:

 

var props = {x:0, y:0, z:0}; //current values
TweenLite.to(props, 5, {x:1000, onUpdate:applyProps});
function applyProps() {
   target.style.WebkitTransform = "translate3d(" + props.x + "px, " + props.y + "px, " + props.z + ")";
}

  • Like 1
Link to comment
Share on other sites

Great, that'll work thanks! Is there a timeline for adding 3D transform support out of the box?

Link to comment
Share on other sites

Nope, I cannot promise a specific delivery date. There are a few other things that are higher on the priority list right now, but those are definitely high up there too. Thanks for your patience.

Link to comment
Share on other sites

  • 4 weeks later...

I've written a function that you can add to any jQuery element that goes some way towards encapsulating this method. It's written as an Adobe Edge demo but it works the same for normal DOM animations.

 

You can check it out here http://chrisgannon.w...-and-greensock/

 

Happy 3D rotating!

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Hi Laurentvd and others,

 

Actually we silently snuck support for new CSS3 properties into the publicly released version of the library. Official announcement coming soon.

 

Right now, you can tween 3D transforms (rotationX, rotationY, perspective, z, etc), boxShadow, borderRadius, textShadow and clip (in browsers that support these features).

 

Below is a zip that contains the updated CSSPlugin and some demo files (which were only intended for our testers but you can certainly take them for a spin).

 

The documentation includes some important info on issues concerning 3D.

 

have a look, and stay tuned for more info on these new features

 

-Carl

preview_update.zip

  • Like 2
Link to comment
Share on other sites

Hi Carl!

 

Been playing with the preview (thanks again for that!) and have an oddly specific question:

 

I see that greensock converts whatever tween values are input into transform: matrix() styles in the actual inline style.

 

Is there any way to specify matrix calls in your actual TweenLite statement? something like:

 

 

TweenLite.to($obj), .5, {
css : {
matrix: (0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 32, -32)

},
ease: Power2.easeOut
});

 

We're working on a tool that converts Flash timeline animation to CSS animation, but want to update it to create TimelineLite calls instead. Internally, flash stores transforms in a matrix that matches CSS, so if this is possible it would be really easy to build just such a tool, and through that gain all of the great browser compatibility that greensock offers (IE9, for instance, which doesn't seem to support webkit keyframes for CSS animation)

Link to comment
Share on other sites

Yes indeed. You can already do that by defining any valid css string as the "transform" like this:

 

//define normal css values for "transform", like a matrix() or matrix3d() or something like "translateX(50px) rotate(30deg)"
TweenLite.to($obj, .5, {css:{transform:"matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 32, -32)"}, ease:Power2.easeOut});

 

So to be clear, let's say you've got a css rule like this:

.rotated {
   -webkit-transform: translateX(50px) rotate(30deg);
   -ms-transform: translateX(50px) rotate(30deg);
   -moz-transform: translateX(50px) rotate(30deg);
   -o-transform: translateX(50px) rotate(30deg);
   transform: translateX(50px) rotate(30deg);
}

 

You could accomplish the same thing like this with TweenLite.set():

TweenLite.set($obj, {css:{transform:"translateX(50px) rotate(30deg)"}});

 

And of course you could animate to those values over 2 seconds like this:

TweenLite.to($obj, 2, {css:{transform:"translateX(50px) rotate(30deg)"}});

 

TweenLite will automatically handle the browser prefix(es) for you.

 

Happy? :)

  • Like 2
Link to comment
Share on other sites

Guys, this s* is insane! It's exactly what we all wanted and more. Thanks!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Would this be a 2D transform or a 3D transform?

TweenLite.to($obj, 2, {css:{transform:"translateX(50px)"}});

When I apply, I am seeing:

transform: matrix(1, 0, 0, 1, 0, 0);

in my element. I just want to make sure that it's being hardware accelerated...

Link to comment
Share on other sites

Nope, that's a 2d matrix. Since you're only moving on the x-axis and there are no 3D properties (z, rotationX, or rotationY), it'll render in 2D. To use a 3D transform, you can simply set force3D:true. 

 

And actually, you're using a very verbose syntax:

//old (long)
TweenLite.to($obj, 2, {css:{transform:"translateX(50px)"}});
//new (short) (and forces 3D)
TweenLite.to($obj, 2, {x:50, force3D:true});
Link to comment
Share on other sites

  • 2 years later...

The CSSPlugin doesn't support 3D transforms yet, but it will soon. In the mean time, you can manually tween the values using an onUpdate kinda like:

 

var props = {x:0, y:0, z:0}; //current values
TweenLite.to(props, 5, {x:1000, onUpdate:applyProps});
function applyProps() {
    target.style.WebkitTransform = "translate3d(" + props.x + "px, " + props.y + "px, " + props.z + ")";
}

 

any update in this?

 

is CSSPlugin supports 3D Transforms?

Link to comment
Share on other sites

Anish,

Yes, GSAP fully supports 3D transforms. Just use rotationX, rotationY or z in your tweens as shown here:

 

 

TweenLite.to(".green", 4, {rotationX:360});
TweenLite.to(".orange", 4, {rotationY:360});
TweenLite.to(".grey", 4, {rotationY:360, rotationX:360, z:300, opacity:0});

 

https://codepen.io/GreenSock/pen/MmpEgK?editors=0110

  • Like 2
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.
×