Jump to content
Search Community

Draw simple stepped line with animation (not with drawSvg)

Arpi test
Moderator Tag

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

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

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

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.
×
×
  • Create New...