Jump to content

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

translation problem after a rotation

Recommended Posts

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


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

Share this post

Link to post
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

Share this post

Link to post
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

Share this post

Link to post
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.