SVG animated graphs

[ahmad117]

A Question, is there any way of creating some graphs in GSAP?

Like in the graphs in attached picture first line appears then 2nd and so on.

I do not have extensive knowledge of GSAP, no idea if its possible in GSAP or not,  if its possible in GSAP any help would be appreciated.

Thank You

[mvaneijgen]

GSAP doesn't "draw" anything.

 

If you make this graph within some design tool and load the SVG in the browser and try to manipulate it with GSAP you'll find it is really easy to do so with GSAP. For instance I see that the green line is not drawn at the first slide, this could easily be done with DrawSVG and that is the power of GSAP, it gives you the tools to animate almost anything.

[Carl]

Yup, and just to add a bit.

 

GSAP is AMAZING at animating SVG elements. This video breaks it down

 

 

Taking the storyboard you supplied I very quickly did an animated mockup just to give a rough idea how something like this can come to life with a few lines of code

 

See the Pen NWMdjxd?editors=1111 by snorkltv (@snorkltv) on CodePen

 

I did that in about 5 minutes and you could probably learn exactly what all that code means if you spend some time learning the basics of GSAP and SVG. I provide the demo just to give you a little push in the right direction and to show that it isn't necessarily complicated or overwhelming. 

 

This lesson may help as well when it comes to understanding the SVG and GSAP workflow

 

 

This interactive graph by SVG Master @chrisgannon does a great job showing what is possible after investing loads of time honing your craft

 

See the Pen pbzEYr by chrisgannon (@chrisgannon) on CodePen

 

Be sure to drag the dot around. How cool is that? 

 

So yes, pretty much anything you want to animate on an SVG graph is totally possible with GSAP and you don't have to go crazy trying to make it work. If you need help getting started with GSAP I have a free course here and I'm about 17 lessons into my SVG beginner's course.

 

hope this helps!