Jump to content


Sprite sheet + SteppedEase in Canvas

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


First, thank you guys for this amazing tool :)

I am trying to play a sprite sheet in canvas using TweenMax and SteppedEase. Everything works great except that there is a black flash when the animation plays backward (yoyo:true). The sprite sheet is 7800px wide and has 26 frames. Not sure what i am doing wrong...

Thanks for your help, fred


TweenMax.to(forestBgd, 1.5, {dx:-7800, ease: SteppedEase.config(26), yoyo:true, repeat:-1});

See the Pen mvrBJK by fr3d3ric (@fr3d3ric) on CodePen

Link to comment
Share on other sites

Hello ELLEVEN DIGITAL FACTORY and welcome to the forums!


It's off by one because you should start counting from zero, not one.


So, if you have 26 images, the first one is already shown therefore, you only have 25 steps to go. Same with the dx, it should be one unit less. In your case -7500.

  • Like 3
Link to comment
Share on other sites

Yep, exactly - the problem was when it was hitting -7800 that was when it was rendering black. As @Dipscom said, just change your steps to 25 and your end value to -7500 and you'll be all set. Nice catch, @Dipscom

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