Share Posted June 19, 2013 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 More sharing options...
Share Posted June 19, 2013 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 19, 2013 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 More sharing options...
Share Posted June 19, 2013 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 More sharing options...
Share Posted June 19, 2013 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 More sharing options...
Author Share Posted June 19, 2013 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 More sharing options...
Author Share Posted June 19, 2013 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 More sharing options...
Share Posted June 19, 2013 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 More sharing options...
Author Share Posted June 19, 2013 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 More sharing options...
Share Posted June 19, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now