Jump to content
Search Community

Animating an Image In Canvas and Beyond

Fakebook test
Moderator Tag

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've been trying to animate an image that I set up in canvas with Easel JS, and have no success.  I was curious if anyone had advice on how to do this?


Also, I am under the impression that animating in canvas will give me a significant performance increase, as opposed to inside the DOM. 


I was curious if there was a good resource I could be pointed to, to help me better understand GSAP + canvas.

See the Pen rxKXVL by NerdOrDie (@NerdOrDie) on CodePen

Link to comment
Share on other sites

Hi there Fakebook!


I, too, am dipping my toes into Canvas. I am not familiar at all with EaseJS so, can't help you with that but I did manage to make your image move.


See the Pen BjPBwQ?editors=0010 by dipscom (@dipscom) on CodePen


You were only targeting the wrong thing. You need to target the sprite itself, in your case: bitmap. (And, in Canvas you need to use the attribute "alpha"  not opacity).


I did not read into your code too much so I can't comment on what you were trying to achieve or why your "image" declaration did not work. As to resources to read in, my knowledge is very bare at the moment, don't really have anything at the moment that I refer to.

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