Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mattfordham

How to tween CSS3 Transform properties?

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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});

Share this post


Link to post
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 + ")";
}

 

any update in this?

 

is CSSPlugin supports 3D Transforms?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×