Animating Border Independently

[connor.online]

Hi all, 

Wondering if I can animate the border of a div separately somehow, or if it's better to nest it (ie: animate border of parent, then text of child). Dealing with SVGs seems like a pain in terms of alignment.

 

Here's my CodeSandBox

 

Thanks!

[Rodrigo]

Hi,

 

Indeed you can do it with a different element:

See the Pen ExRerPE by GreenSock (@GreenSock) on CodePen

 

I don't know if is possible doing that with CSS Variables. I know that you can make pretty amazing stuff with pseudo classes which can be translated to CSS variables, but that's a bit out my area of expertise. I know @Cassie knows her way around them, maybe She can teach us a couple of tricks about this.

 

Happy Tweening!

[Cassie]

Ah yeah, all about the CSS vars and pseudo elements. Nice and tidy. Keeps decorative stuff out of the DOM.

Here you go!

 

See the Pen vYrVyXM by GreenSock (@GreenSock) on CodePen