Jump to content


Animating border using :after and :before

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



I'm thinking about animating the border on a flexbox using :after and :before just as it's done in the Codepen and the example "Draw Meet". But before I try to do it, is it possible to animate :after and :before with Greensock?



See the Pen yYBpVY by giana (@giana) on CodePen

Link to comment
Share on other sites

Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work.


See the Pen jvaBmm?editors=0010 by Sahil89 (@Sahil89) on CodePen


It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin,


See the Pen rZYymd?editors=0010 by Sahil89 (@Sahil89) on CodePen


Few things to note,

1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes.

2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg.

3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join.

4. SVG overflow is set to visible so stroke won't get partially hidden.


  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Sahil, thanks a lot for this great answer! I will try this out on Flexbox.



  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...



I have tried to do this on a flex-box now, and I almost got it. But, the CSS-transistion doesn't happen on the box, instead it fills in the "box" of the browser window? 


See the Pen gBOeeq by Devotee007 (@Devotee007) on CodePen




Link to comment
Share on other sites

  • 3 weeks later...

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.