smallio

Recreating an animated X with GSAP

Recommended Posts

Hey guys,

 

So i've been trying to recreate this nice little X with GSAP just to get better with child elements & transform origins. One of the things I can't figure out is how to correctly make this work with gsap transform origins & what the equivalent of before & after in css is. 

 

Any help would be greatly appreciated :)

 

Cheers,

Smallio

 

 

 

 

Share this post


Link to post
Share on other sites

The transformOrigin for html elements is at center. You can change it using percentage or by using left, right etc. For svg elements, by default smoothOrigin is true so lets say you change your transformOrigin your element will animate as if it already had that transformOrigin, in some cases you will want to disable that. On the other hand if you change transformOrigin for html elements, they will jump and smoothOrigin does not support html elements.

 

To animate pseudo elements you could use CSSRulePlugin to select them and animate. But it can too tricky to work with them. For example if you define your rule as '.close span:after' then you will need to use that string to select pseudo element, you can't use 'span:after'.

 

You would be a lot more comfortable using actual elements or SVG.

 

https://greensock.com/docs/Plugins/CSSRulePlugin

  • Like 5

Share this post


Link to post
Share on other sites

Hello @smallio

 

The only way to animate CSS :before and :after pseudo elements is to use the GSAP CSSRulePlugin like @Sahil advised.

 

Below is an example of using the GSAP CSSRulePlugin to animate pseudo elements that are basically generated content that is not actually in the DOM.

 

Please see the CSSRulePlugin docs: https://greensock.com/docs/Plugins/CSSRulePlugin

 

Just keep in mind that when using the CSSRulePlugin you have to make sure you follow some guidelines:

  1. Only use the single colon syntax :before and :after. Do not use the new double syntax ::before and ::after
  2. Make sure that the CSS rule in your CSS is the same exact CSS rule used in your GSAP getRule() method so GSAP can find that same exact CSS rule in your stylesheet
     

 

Happy Tweening :)

  • Like 6

Share this post


Link to post
Share on other sites
5 hours ago, Sahil said:

You would be a lot more comfortable using actual elements or SVG.

 

I'd definitely agree with @Sahil. I avoid pseudo elements like the plague. They're usually more trouble than they're worth. SVG would be easier to work with & gives you so many more animation options too. Of course that's just my two cents worth. YMMV. Happy tweening.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for all the info guys :) @PointC @Jonathan @Sahil

 

Always had a bit of hatred for them & after all this info I'm gonna avoid lol ... 

  • Like 4

Share this post


Link to post
Share on other sites

Yeah, that's a good link from @Sahil to bookmark. Hand-coding is a good skill to have.  

 

Also keep in mind that you aren't limited to drawing the full line with DrawSVG. By drawing an interesting path and only showing a percentage of it you can add some style to the animation. Here's a quick example.

 

 

Obviously that demo is just an 'x' to an 'x', but you could easily make a straight line animate into an icon using the same technique. If the paths are starting to get overly complex, you can also animate the start of one as the end of another completes. Using a Linear ease where the two meet will result in a smooth animation. That's what I did on my 'Need for Speed' demo. The line between the two text blocks draws itself to the beginning of the car outline and then the car outline draws into view. But with a Linear ease between the two, it looks like one continuous path. 

 

Hopefully that gives you some additional ideas. Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

@pointC

 

Damn!!! Once again dude, thank you so much :D 

 

A lot to learn from!!! 

  • Like 2

Share this post


Link to post
Share on other sites

Hey @smallio :)

 

This thread gave me an idea for a new demo so I thought I'd post it for you. I animated the menu icon into the x and also added a little handwriting effect for some fun. Maybe it'll give you some ideas.

 

 

Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites
2 hours ago, PointC said:

Hey @smallio :)

 

This thread gave me an idea for a new demo so I thought I'd post it for you. I animated the menu icon into the x and also added a little handwriting effect for some fun. Maybe it'll give you some ideas.

 

 

Happy tweening.

:)

 

 

So cool dude! 

  • Like 2

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.