artstyle Posted January 30, 2021 Share Posted January 30, 2021 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? Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 Hey @artstyle, Please make a minimal demo of your setup in something like a CodePen if you'd like help. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
artstyle Posted January 30, 2021 Author Share Posted January 30, 2021 See the Pen MWbWZaW by aptypkaa (@aptypkaa) on CodePen 1 Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 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 1 Link to comment Share on other sites More sharing options...
artstyle Posted January 30, 2021 Author Share Posted January 30, 2021 it is still translate then rotate Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 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 1 Link to comment Share on other sites More sharing options...
artstyle Posted January 30, 2021 Author Share Posted January 30, 2021 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 Link to comment Share on other sites More sharing options...
artstyle Posted January 30, 2021 Author Share Posted January 30, 2021 i want to make animation that will move the block along the red line. but because of broken order its not working Link to comment Share on other sites More sharing options...
Solution mikel Posted January 30, 2021 Solution Share Posted January 30, 2021 Hey @artstyle, It could also be solved that way See the Pen jOVENyV?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
GreenSock Posted January 30, 2021 Share Posted January 30, 2021 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! 4 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