Jump to content


Animating canvas element

Recommended Posts


Relatively new to GSAP but have loved the forums for awhile now, hugely helpful for almost anything I encounter! However, I've stumbled into a canvas animation I can't quiet figure out. I have a canvas wave animation whose height is controlled by an "amplitude" value on line 7. I am unsure of where the .to tween must be placed to have access to the draw function and the amplitude.

Would love any pointers you may have to offer! Please let me know if there is any additional information I can provide.




See the Pen XWZpoeq by Nathan_Nye_92 (@Nathan_Nye_92) on CodePen

Link to comment
Share on other sites

Welcome (officially) to the forums, @Nye. And thanks for being a Club GreenSock member!


This is an engineering issue in the way you've got things structured - it makes it pretty difficult to do what you're asking. Ultimately, I'd think it's best for you to expose some kind of getter/setter for the amplitude so that you can easily tween it. Right now, though, it's a bunch of separate classes that have disparate parts of the data and then you've also got various functionality all merged into a single function like the Wave.draw() method not only does the drawing but it ALSO calls update() on the points which actually MOVES them. That gets very messy when you want to isolate functionality, like maybe you only want to draw() the current state rather than ALSO moving things. 


I'd recommend restructuring things to isolate the functionality you need properly. 


And then maybe you'd have a new amplitude() getter/setter that you can tween. 


I hope that helps get you moving in a positive direction. 

Link to comment
Share on other sites

@GreenSock That seems like a much easier approach to tweening the amplitude, I'll give that a go. Very much appreciate the insight on a getter and setter once the value is properly exposed, I'll work on separating the update() and draw() functionality into the pieces of each!



Link to comment
Share on other sites

  • 4 weeks later...

Finally got around to monkeying with this. For anybody that finds this and wants to know what I ended up doing:


I followed a different tutorial for creating the sine wave that allowed access to getters/setters I could use like Jack suggested:


A wave object contains all the variables I wish to control. GSAP can then target wave.whatever and animate it however. Hope this helps!


See the Pen vYdPJEw by Nathan_Nye_92 (@Nathan_Nye_92) on CodePen

  • Like 1
  • Thanks 1
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.