Jump to content
GreenSock

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

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 !

Thanks- 
Idan

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