Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PatMa

Basic animation failed (close icon)

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

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!

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you my friends !!!

Share this post


Link to post
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.

×