Jump to content
Search Community

Animating border using :after and :before

Devotee007 test
Moderator Tag

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

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

  • 3 weeks later...
  • 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.
×
×
  • Create New...