Animating Border Independently

[connor.online 6 Likes (Newbie)]

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 5,907 Likes (Superhero)]

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 5,658 Likes (Superhero)]

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