Basic animation failed (close icon)

[PatMa]

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

[ZachSaucier]

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%"});

 

[imcorentin]

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!

[PatMa]

Thank you my friends !!!