Jump to content
GreenSock

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

translation problem after a rotation

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

Thank you very much for your fast and detailed answer.

It makes sense now, the first way is the easiest.

But I love the fact that there are other ways. It's going to be very useful to know all of that :)

 

Thanks again

 

  • Like 2
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

8 hours ago, Pavel Zhuravlev said:

Perhaps you could help me understand how to do the right math, thank you.

@Pavel Zhuravlev sure, I don't mind helping. Please provide a minimal demo so I can see what you mean (in context). 

  • Like 1
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.
×