Jump to content
GreenSock

smallio

Recreating an animated X with GSAP

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

 

See the Pen odwvNZ by smallio (@smallio) on CodePen

 

 

See the Pen gjdYyX by smallio (@smallio) on CodePen

 

Link to comment
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
Link to comment
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
     

See the Pen eMLogz by jonathan (@jonathan) on CodePen

 

Happy Tweening :)

  • Like 6
Link to comment
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
Link to comment
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
Link to comment
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.

 

See the Pen bjmEzE by PointC (@PointC) on CodePen

 

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. 

 

See the Pen yPbYRY by PointC (@PointC) on CodePen

Hopefully that gives you some additional ideas. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

@pointC

 

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

 

A lot to learn from!!! 

  • Like 2
Link to comment
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.

 

 

See the Pen zLbxzO by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 5
Link to comment
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.

 

 

See the Pen zLbxzO by PointC (@PointC) on CodePen

Happy tweening.

:)

 

 

So cool dude! 

  • Like 2
Link to comment
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.
×