Rotation doesnt work before translate

[artstyle]

Hello!  i have a code like this 

tl_portfolio1.to(".portfolio1", {rotate:-5, x:-570, y:105, duration:0.1})
  .to(".portfolio2",{rotate:-5, x:570, y:105, duration:0.1},"<");

but when it renders it looks like this transform: translate(570px, 105px) rotate(-5deg) scale(1.00001);

so the rotation applies after translate. i want it work firstly. why it doesnt work?

[mikel]

Hey @artstyle,

 

Please make a minimal demo of your setup in something like a CodePen if you'd like help.

 

 

 

Happy tweening ...

Mikel

 

 

[artstyle]

See the Pen MWbWZaW by aptypkaa (@aptypkaa) on CodePen

[mikel]

Hey @artstyle,

 

You are using inline styles. This can cause conflicts.

Side note:  we strongly recommend always setting your transform-related values via GSAP. We explain why here. 

 

See the Pen bGBGOYy?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[artstyle]

it is still translate then rotate

[mikel]

 

If you want to run two animations / transforms separately, one after the other, use two tweens and position them accordingly.

 

See the Pen RwowveP?editors=1010 by mikeK (@mikeK) on CodePen

 

Is this what you expect?

 

Happy tweening ...

Mikel

 

[artstyle]

i dont need 2 different translations. i need to change the order of the translatons. when the page rendered in the dev tools i see 

<div class="portfolio1" style="transform: translate(-100px, 15px) rotate(-5deg) scale(1.00001, 1.00001);">
          </div>

the animations looks broken because of translating then rotating. i want to swap them. gsap.set is not working

[artstyle]

i want to make animation that will move the block along the red line.
but because of broken order its not working

[mikel]

Hey @artstyle,

 

It could also be solved that way

 

See the Pen jOVENyV?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[GreenSock]

5 hours ago, artstyle said:

the animations looks broken because of translating then rotating. i want to swap them. gsap.set is not working

One of the strengths of GSAP is the fact that it delivers CONSISTENCY with transforms, always rendering them in the same order. That allows you to independently control each component (almost impossible with CSS). Trust me, this is a GOOD thing. It's not a bug. 

 

We also strongly recommend setting all your transforms via GSAP for maximum speed and accuracy which we explain here. 

 

In the vast majority of cases, there are much cleaner workarounds to getting the effect that people THINK they need the non-standard order-of-operation transforms to accomplish, like @mikel showed. If you really, really need transforms in a different order there are solutions for that, like using a proxy object and animating a complex string. I'll spare you the lengthy explanation unless you request it

 

Happy tweening!