Animating a border- Advice needed

[greenanimation]

Hello guys -
I'm a new GSAP developer and I've encountered a problem that seemed pretty easy at first glance, but since I've spent way too much time on it , I decided to post it on the form as it may also help some other users.

I'm trying to create an animated border similar to the 'draw' border example here :

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

 

What would be the correct way to approach this problem?
So far I've tried to embed the transition CSS on the element.(didnt work out)
I'm also aware of the SVG plug-in but I'm not sure if this would be a correct use for it.

Would love to get some insights !

Thanks- 
Idan

[dev-kp]

Hey Idan!

 

I think SVG would a very good fit for this:

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

 

This is the example provided by Greensock. 

 

tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1)
  .fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false}, "+=0.1")

 

You can directly control the line and how it will draw, this includes the start and end positions.

 

Hope this helps.

[Jonathan]

Hello @greenanimation and Welcome to the GreenSock Forum!

 

Animating a border requires nested elements for each side, animating each after the other.

 

The following is an example of animating a border with GSAP using a 1 timeline with 4 fromTo() tweens:

 

See the Pen PqrvgE by jonathan (@jonathan) on CodePen

 

DrawSVG would give you more freedom with shapes.  Or you can use a DOM or SVG mask to do this.

 

Happy Tweening