Jump to content
GreenSock

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

Translating CSS 3D animations to GSAP

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

Hello,

 

I was wondering how could we translate CSS 3D animations & transformations to equivalent GSAP code.

 

I have the following CSS: 

@-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } }

And want to translate this into GSAP code.

 

I have also set up a codepen here: 

See the Pen pBgbo by netgfx (@netgfx) on CodePen

 

What I'm trying to do is rotate in an "orbital" path some objects but without them rotating around themselves. Is there a plugin for GSAP or some specific code that can do that?

 

Thanks in advance! 

Link to comment
Share on other sites

Sure, if I understand your goal correctly, you'd just use the "rotation" property: 

TweenMax.fromTo('.path' ,5, {rotation:0}, {rotation:360, transformOrigin:"50%, 50%, -200px"});

And just so you know, the reason the "transform" code didn't work is because technically the matrix3d() that results from "rotateZ(0deg)" and "rotateZ(360deg)" is identical, so CSSPlugin can't discern anything to tween. When reading computed styles in the browser, it doesn't report the original text you used, like "rotateZ(360deg)" (that's impossible as far as I know), but instead it reports a value like "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)". So when you set the GSAP-specific transforms like "rotation" and "rotationY" and "scaleX", etc., it records those so that it can discern full rotations, etc. 

  • Like 1
Link to comment
Share on other sites

I see, yes it is working now but I still have one question. Why the following CSS code doesn't "rotate" the "pink sphere" around it self, whilst the GSAP equivalent does.

@-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } } 
                       
                        
@-webkit-keyframes electronFix { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(-360deg);  }}

GSAP:

  TweenMax.fromTo('.path' ,5, {rotationZ:0}, {rotationZ:360, transformOrigin:"50%, 50%, -200px"});

  TweenMax.fromTo('.electron' ,5, {rotationX:90, rotationY:0}, {rotationX:90,rotationY:-360, transformOrigin:"50%, 50%, 0px"});

I have updated the codepen to match this question: 

See the Pen pBgbo by netgfx (@netgfx) on CodePen

 

Thanks.

Link to comment
Share on other sites

It's an order-of-operation thing. Flip-flop the order of your rotateX() and rotateY() in the css transform and you'll get the result you want (I think). 

Link to comment
Share on other sites

Just curious: are you trying to compare GSAP and css animations to see which is better somehow? Keep in mind that in CSS animations/transitions, you cannot handle each part of the transform distinctly, like having a rotation and scale use different timings and eases. That's a pretty major drawback in my opinion. Obviously GSAP solves that problem. And CSS animations can only use a limited set of eases or a bezier with only 2 control points, so Elastic, Bounce, SlowMo, and RoughEase are all impossible. And don't get me started on workflow and API...I could go on for hours ;)

 

In case you haven't seen it: http://www.greensock.com/why-gsap/

Link to comment
Share on other sites

heh... no nothing like that, I was simply trying to find a way to create an "orbit like" animation with 2D means, and the first thing I found was a css3 example... from that point on, I was trying to convert it to GSAP for all the points you mentioned. Personally I find it very frustrating to work with CSS animations (directly onto css files) because of the workflow. I'm a little old-school and when I hear "functionality, animation, etc" I tend to think "code" and not "design or styles".

 

I'll give your suggestion a try and let you know.

 

Thanks.

Link to comment
Share on other sites

It doesn't seem to work, still the GSAP code forces the object to rotate around it self (and this is not desirable).

 

I'm trying to achieve something like this: 

See the Pen idhuG by juliangarnier (@juliangarnier) on CodePen

 

Where the planets don't actually rotate around themselves. Just around the central object.

 

Updated the pen to show what I'm trying to achieve with GSAP but not quite making it :)

 

See the Pen pBgbo by netgfx (@netgfx) on CodePen

Link to comment
Share on other sites

Hi Michael,

 

Why don't you give bezier path a try?, it might work.

 

Take a look at this:

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

 

And this:

See the Pen ABkdL by GreenSock (@GreenSock) on CodePen

 

And since the objects are just translating and not rotating you just has to focus on the bezier path animation, although it'll be sweet if they do both.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

I thought of that too, but I'm not sure if the path can have that 3D feel. At least I haven't seen any examples showing that. 

Link to comment
Share on other sites

Yep, the extra thing you'll have to take care of is the element size/scale, that's certainly a factor and the price to pay for a perfect elliptical path.

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