Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating a border- Advice needed

Recommended Posts

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 !


Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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 :)



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