supamike Posted January 13, 2020 Share Posted January 13, 2020 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 More sharing options...
GreenSock Posted January 13, 2020 Share Posted January 13, 2020 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 Link to comment Share on other sites More sharing options...
supamike Posted January 13, 2020 Author Share Posted January 13, 2020 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 2 Link to comment Share on other sites More sharing options...
Pavel Zhuravlev Posted August 3, 2020 Share Posted August 3, 2020 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 More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now