PatMa Posted July 10, 2020 Share Posted July 10, 2020 Hello my friends Im trying to animate my close icon (without SVG i prefer divs) with GSAP; but I don't know why my divs are so bugging when I animate them Can you please help me to animate this and to understand what failed ? thanks See the Pen PoZammJ by patmag (@patmag) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 10, 2020 Share Posted July 10, 2020 Hey PatMa. Let me explain what's going on. You have a .from() tween which animates from the given values to the values at the time when it is created. So it will go from the transformOrigin of "100% 100%" to the transformOrigin value of "0.5px 25px". However, GSAP assumes that you don't want to actually animate the transformOrigin (because most of the time people don't want that to happen, they just want to set the value at the start or end. It is possible if you want to do that though). So it just sets the transformOrigin to "100% 100%" to start and changes it it to "0.5px 25px" at the end. Does that make sense? You might be interested in reading the most common GSAP mistakes article because it talks about misusing .from() tweens: I'm guessing you want to set the transformOrigin using a .set() call before you run that animation. gsap.set([closeFirstLine, closeSecondLine], {transformOrigin: "100% 100%"}); 3 1 Link to comment Share on other sites More sharing options...
imcorentin Posted July 10, 2020 Share Posted July 10, 2020 Hey PatMa, Just had a quick look at your CodePen. If I understood correctly what you wanted to create, here's an alternative I made: See the Pen LYGryoW by cbernadou (@cbernadou) on CodePen Have fun! 2 1 Link to comment Share on other sites More sharing options...
PatMa Posted July 10, 2020 Author Share Posted July 10, 2020 Thank you my friends !!! 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