Jump to content
Search Community

SVG animated graphs

ahmad117 test
Moderator Tag

Recommended Posts

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


Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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!




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