Animating border using :after and :before

[Devotee007 17 Likes (Newbie)]

Hi,

 

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?

 

//Devotee007 

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

[Carl 11,109 Likes (Superhero)]

Yes, GSAP can tween the pseudo elements  :before and :after using the CSSRulePlugin

 

https://greensock.com/CSSRulePlugin

 

 

[Sahil 2,655 Likes (Superhero)]

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.

 

[Devotee007 17 Likes (Newbie)]

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

 

//Devotee007

[Devotee007 17 Likes (Newbie)]

HI, 

 

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

 

 

//Devotee007

[Sahil 2,655 Likes (Superhero)]

@Devotee007 Not really GSAP issue, it was because your container didn't have position.

 

See the Pen yRpEvy by Sahil89 (@Sahil89) on CodePen