Jump to content


Animating Border Independently

Moderator Tag

Recommended Posts

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



Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

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

  • 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.