Jump to content
GreenSock

Arpi

Draw simple stepped line with animation (not with drawSvg)

Go to solution Solved by PointC,

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

I want to draw a multiple simple stepped line with animation, like it's done here 

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

.

 

But I'm NOT a club member :(, so I can't do this with drawSVG. Is there any chance to do it with gsap but without drawSVG.

 

Thanks in advance.

See the Pen by 00e35kb6 (@00e35kb6) on CodePen

Link to comment
Share on other sites

Hello Arpi, Hello , and Welcome to the GreenSock forum!

Thank you for the codepen example, very helpful !!

 

You could try using a SVG mask and animate the mask over your line paths.

 

Also doing a square or rectangle you could animate the border of a non SVG DOM element, like this:

 

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

 

The above example can be tweaked to make a triangle out of the boxes borders by adjusting the width, height, and border properties. But that takes some time to setup.

 

Maybe others here have other solutions, but the GSAP DrawSVGPlugin would give you the greatest control and save you time with the various browser bugs and behavior.

 

:)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

Thank you a lot for your efforts. This can help me much. 

 

Hope I can buy it after learning to use other options here, now I'm trying to dig into Gsap.

Link to comment
Share on other sites

Some helpful links:

 

GSAP Jump Start Playground:

 

https://greensock.com/jump-start-js#from-tween

 

GreenSock Learning YouTube Channel:

 

https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg

 

GSAP Blog:

 

http://greensock.com/blog/

 

GSAP Ease Visualizer:

 

http://greensock.com/ease-visualizer

 

GSAP Docs:

 

http://greensock.com/docs/#/HTML5/

 

Happy Tweening!

 

:)

Link to comment
Share on other sites

  • Solution

Hi Arpi :)

 

Welcome to the GreenSock forums.

 

I agree with Jonathan - the DrawSVG plugin would make your life a lot easier and Club Membership offers many other time saving plugins. If you can't join right now, you can make that animation happen without the plugin.

 

You'd first need to change your polyline to a path. You then need to get the length of the path and set the strokeDasharray = to that value. After that, you can animate the strokeDashoffset from the path length to a value of 0.

var path = document.querySelector('#path');
var l = path.getTotalLength();

TweenMax.set(path, {strokeDasharray:l});
TweenMax.fromTo(path, 3, {strokeDashoffset:l}, {strokeDashoffset:0});

Here's a fork of your demo.

 

See the Pen AXzjLX by PointC (@PointC) on CodePen

 

Hopefully that helps you get started, but as I mentioned DrawSVG makes this type of animation quick, easy and flexible. We hope to see you in Club GreenSock soon.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Nice solution PointC :)

Link to comment
Share on other sites

Hi all,

 

@Jonathan, Thanks a lot for useful links.

 

@PointC, Great solution, I hope one day I can be such a professional in gsap as you're guys. Thanks Thanks Thanks!

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