Jump to content
GreenSock

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

Stuck with trying to recreate animation from CSS 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 have created this animated logo using CSS which triggers on hover :

 

See the Pen pRbqMQ by nikches (@nikches) on CodePen

 

I started recreating the above animation using Greensock and i'm stuck on the "rotationY" property.

My problem is with the right wing of the eagle. As you can see in the CSS animation the right wing moves 60 deg towards the viewer on the Y axis, but when i recreate the same wing animation with GSAP the wing is moving away from the viewer.

 

I have tried using negative values (rotationY: -60) but the result is the same.

I have also tried using "directionalRotation" by apllying "rotationY: "-60_cw" / "rotationY: "60_cw" /  "rotationY: "-60_ccw" / "rotationY: "60_ccw" without success.

 

I would like to ask for your help in identifying what am i doing wrong ?

 

Thank you for your time and help.

See the Pen wgWNwy by nikches (@nikches) on CodePen

Link to comment
Share on other sites

Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user

 

I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.

Link to comment
Share on other sites

Try changing the line 8 from rotationY:60 to rotationZ:60. I did that and it no longer animates toward the user

 

I havent done 3d stuff in a minute, but I can see why you used rotation. That's confusing a little bit.

Hello alwayzambitious, thank you for your response. When the wing rotates on the Z-axis (rotateZ) it looks like a rotating clock. What i am trying to achieve is rotate on the Y-axis (rotateY) so it will look like an opening door. Check out my original animation to see what i mean: 

See the Pen pRbqMQ by nikches (@nikches) on CodePen

 

Link to comment
Share on other sites

As I know SVG doesn't support 3D CSS transforms.

 

 

http://read.pudn.com/downloads135/ebook/573344/OReilly-SVG-Essential.pdf

 

If You want to rotate vector shapes in 3D space, put every one of them into <div><svg>....</svg></div> tags and twist the <div>s.

 

But I am getting confused now what is possible and what is not.

  • Like 3
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.

×