Jump to content
Search Community

translation problem after a rotation

supamike test
Moderator Tag

Recommended Posts

Hi,
It looks like something simple but I still didn't figure out how to do that.

So I have a rectangle, that I rotate with gsap.set.

I just want to do a simple loop animation, just like the red rectangle in the codepen example (a CSS keyframe animation).

 

The blue rectangle is what I am trying to do with gsap, but failed.

How to do the same animation?

 

Thank you

Mike

See the Pen ExaRVVK by supamike (@supamike) on CodePen

Link to comment
Share on other sites

That's just an order-of-operation thing. One of the biggest benefits of using GSAP is that you always get consistent order-of-operation with transforms, but you've got an edge case that uses a non-standard ordering of the transforms (you're rotating FIRST and then translating but usually it's the other way around). Trust me - consistent order of operation is a GOOD thing :) If you need an explanation as to why, let me know.  

 

There are many ways you could solve this with GSAP. The simplest is probably to just put the element in a container and rotate the container. Another option is to do the math to figure out where the x/y translation would be at that particular rotation and then skip the rotation altogether. Here are both solutions in a forked codepen: 

See the Pen 5b4de068efd5061dfa965fab06d53ed7?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

  • 6 months later...
On 1/13/2020 at 8:18 AM, GreenSock said:

That's just an order-of-operation thing. One of the biggest benefits of using GSAP is that you always get consistent order-of-operation with transforms, but you've got an edge case that uses a non-standard ordering of the transforms (you're rotating FIRST and then translating but usually it's the other way around). Trust me - consistent order of operation is a GOOD thing :) If you need an explanation as to why, let me know.  

 

There are many ways you could solve this with GSAP. The simplest is probably to just put the element in a container and rotate the container. Another option is to do the math to figure out where the x/y translation would be at that particular rotation and then skip the rotation altogether. Here are both solutions in a forked codepen: 

Hello @GreenSock, im facing the same problem and thank you for detailed explanation.
I was trying to apply same logic to do the math you showed in example for translation, but the problem that im trying to translate both x, y values and can't achieve right behavior (in your example you are showing only translation by y axis).
Perhaps you could help me understand how to do the right math, thank you.

 

 

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.
×
×
  • Create New...