Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sam101

HTML 5 and JavaScript Canvas

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 have to add animation to this canvas can anyone help me ? it can be simple canvas animation of your own design. For example, you could 

rotate the four smaller solid circles around the red hollow circle using trigonometry 

(sin and cos) if you can leave your email and ill send you the code i've done the drawing just need help with making the shapes move  

Link to comment
Share on other sites

Hello Sam101, and welcome to the GreenSock Forums!

 

Here is a canvas video tut by Lee Brimelow: http://www.gotoandlearn.com/play.php?id=161

 

Scrub the video to around 16:24 .. that is where he talks about GSAP and canvas.

 

Also i would recommend to check out the below links to help learn GSAP:

 

GreenSock on CodePen:

http://codepen.io/GreenSock/

 

GreenSock Documentation: TweenMax, TweenLite, TimelineMax, TimelineLite, Plugins

 

You could also post your code here so we can see what your code looks like. GSAP can animate the rotation of an element with great simplicity and ease. It does all the trigonometry heavy lifting.

 

Here is a video tut bt GreenSock on How to create a codepen example demo.

 

By providing us an example we can better see your code in action, to better help you,

 

As a side note here is an example of GSAP animating a element using rotation:

 

See the Pen oAhsm by jonathan (@jonathan) on CodePen

// rotates element #box 360 degrees back and forth forever
TweenMax.to("box", 2, {rotation:360, repeat:-1, yoyo:true, force3D:true});

You can see that with just one line of code GSAP rotates the element.

 

Hope this helps! :)

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