Jump to content

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

How animate sprite image in canvas?

Recommended Posts

Hi and welcome to the Greensock forums.


Is there any particular reason to do it in canvas?


You can see a very neat non-canvas example here:


See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen


See the Pen lykFn by jamiejefferson (@jamiejefferson) on CodePen


If doing it in canvas is required, you could take a look at GSAP's KineticJS plugin in order to get the tutorial code to work with GSAP.



  • Like 3
Link to post
Share on other sites

Hi and welcome.


Unfortunately I don't have time at the moment to convert all that code for you, but keep in mind that GSAP can animate any numeric property of any JavaScript object.


In general terms you could create a TweenLite that tweens the frameIndex of a Sprite object with an onUpdate callback that could call the render method.

  • Like 1
Link to post
Share on other sites

I did the animation only with GSAP ( http://cdpn.io/hsdLI ) , but I would like to show me how to do with KineticJS plugin in canvas same animation with this options.


Hi Alek,

Your sample worked for me and I was able to adapt it to other sprite sheets of different sizes and sprite counts.


All good... but I don't understand WHY it works.  Mostly, I don't understand the 3rd line added to the timeline.  It seems that the 2nd call resets the image back to it's original position after the first call finishes all the steps, but I'm not sure why that first call is appended again after the reset to the timeline.


Actually, I'd love a breakdown of how this whole thing works if anyone has a moment:

function vertBarAnim() {
    // vertbarsSprite_20.png
    var vertbarTL = new TimelineMax({repeat : -1, repeatDelay : -1});
    vertbarTL.to("#vertBarAnim", 0.9, {backgroundPosition : "-1701px 0", ease : SteppedEase.config(81)});
    vertbarTL.set("#vertBarAnim", {backgroundPosition : "0 0"});
    vertbarTL.to("#vertBarAnim", 0.9, {backgroundPosition : "-1701px 0", ease : SteppedEase.config(81)});



Link to post
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.