GSAP Border Animation

[caleb_case]

Hello, 

 

I'm wanting to recreate this border animation where it draws in a thicker border to the lighter border on the footer of this site: https://ventriloc.ca/fr/

 

Would anyone be able to point me in the right direction in how I can achieve this affect or a similar affect? 

 

An idea I had was instead of keeping the thicker orange border small as you scroll down the page but having it expand to it's full parent container border instead of just going around.

 

Any help/insight would be greatly appreciated.

 

Thanks!

[GreenSock]

Are you talking about the border animation where a small chunk of the line/border animates around the edges (on top of the thinner line)? That'd be perfect for DrawSVG (Club GreenSock membership benefit). 

[PointC]

Jack beat me to it, but yep - DrawSVG makes that super easy.

See the Pen BaKGyaa by PointC (@PointC) on CodePen.

 

Happy tweening.

 

[caleb_case]

Perfect.

 

Would I use ScrollTrigger to tie the animation to scroll them I'm guessing?

[GreenSock]

4 minutes ago, caleb_case said:

Perfect.

 

Would I use ScrollTrigger to tie the animation to scroll them I'm guessing?

Exactamundo. ✅