Jump to content
GreenSock

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

How to get blocks animate diagonally background

Recommended Posts

I am trying to get blocks animate diagonally (animating one-way) like what you see in this pen, but now I want that in canvas as you might see. How can I get this animation in canvas --->

See the Pen LrOKbB by GreenSock (@GreenSock) on CodePen

See the Pen dKrbMY?editors=1011 by chichichi (@chichichi) on CodePen

Link to comment
Share on other sites

Not really sure what you want. Animating diagonally is just a matter of updating the x and y at the same rate OR rotating the parent (as suggested in previous posts). I don't do a lot of canvas animations but the demo below should get you closer to what you want.

 

See the Pen gKEOzq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@Carl the circles should animate one way instead of infinite circles

Link to comment
Share on other sites

I guess you could try removing the yoyo:true from the tween. This way they will not return to their starting position. They will only move from top left to bottom right.

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