Jump to content
Search Community

TranslateX with rotation not working properly

Guest
Moderator Tag

Go to solution Solved by Guest,

Recommended Posts

I'm trying to move an object which direction is based on its rotation. 

When I set the css transform property like this (through the browser devtools), the animation works.

transform: rotate(45deg) translateX(50)

If I switch their positions, like below, the rotation will be rendered after moving the object, in this case horizontally only.

transform: translateX(50) rotate(45deg)

That's what the gsap library does when I try to animate it. It always applies the translateX before the rotate or any other values.

gsap.set(obj, { rotation: 90, translateX: 0});
gsap.to(obj, { translateX: 50}); // or gsap.to(obj, { rotation: 90, translateX: 50});

 

Is there a way to force gsap to consider rotate while animating  translateX ?

Link to comment
Share on other sites

  • Guest changed the title to TranslateX with rotation not working properly

Hey,

 

The .set method applies those properties on load without animating them. If you want to animate both properties at the same time you can add the rotation and x in gsap.to / or .from / or .fromTo depending on what you want to achieve . If you want to chain them you can create a timeline and add those tweens to it. 

 

Here you can find some helpful insights: 

 

https://greensock.com/docs/v3/GSAP

https://greensock.com/docs/v3/GSAP/Timeline

 

Here is a simple example that may help you understand how it works. 

 

See the Pen RwMzoKg by danielmtd (@danielmtd) on CodePen

 

  • Like 1
Link to comment
Share on other sites

  • Solution

I found a topic that explains the same problem

and according to this solution, I have to put the object (with translate) inside another element (with rotate), and it worked to me. Though it's not considered an issue, I think it would provide easier ways to code an animation if gsap handled the transform and any css properties accepting multiple values which give a different behaviour based on their order.

6 hours ago, daniel.mt said:

Hey,

 

The .set method applies those properties on load without animating them. If you want to animate both properties at the same time you can add the rotation and x in gsap.to / or .from / or .fromTo depending on what you want to achieve.

 

I'd rather use .set more than .from for loading events.

Link to comment
Share on other sites

30 minutes ago, lizu said:

I think it would provide easier ways to code an animation if gsap handled the transform and any css properties accepting multiple values which give a different behaviour based on their order.

That would actually be a nightmare, trust me. :) Not only would it add substantial amounts of kb, but also slow things down and produce unpleasant edge cases. For example, imagine if you start animating to transform: "rotate(50deg) translate(50px, 40vh)" and then halfway through that animation you interrupt it and animate to transform: "translate(20vw, 70px) rotate(-20deg)". Doh! Which order should be honored? If we switch the order to the 2nd one, you'd suddenly see a jump. 

 

One of GSAP's biggest strengths is the way it handles transforms and solves all kinds of problems like delivering a consistent order of operation. If you really need a different order of operation (that's almost never the case), you can still accomplish it with the technique you quoted above, or there are different ways too but I'd strongly recommend that you stick with the standard order of operation. If you get stuck, please provide a minimal demo (like in CodePen) and we'd be happy to offer some advice on how to achieve the effect you want using the standard order of operation. 

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