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

# 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

##### 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

• 3
##### Share on other sites

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

• 2
##### 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.

##### 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).

• 1