Jump to content
Search Community

Draggable line graph / wave form - looking for best way to animate

are_dub test
Moderator Tag

Go to solution Solved by OSUblake,

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 need to render a line graph, using data points, and allow the user to scroll left or right through the graph. I was thinking to use drawSVG in some fashion, but I am having an issue translating the data points to an SVG line. 


I'm not sure that is the way to go - I need to have the graph display about 10 seconds of a 30 minute long wave, but the user needs to be able to scroll back and forth at will. 


What would you use to achieve this effect? 


My current thinking is that I either


  1. Render an svg for each frame of the animation, somehow translating x and y into an svg line.
  2. Render one long wave and scroll it within a container. (Again somehow translating x and y into an svg line)
  3. Look at graphing libraries and use greensock to manipulate the data point properties.

I obviously at the concept stage here, so sorry for the lack of details. Any thoughts are appreciated!

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