Jump to content
Search Community

Sprite sheet animation shaking when scaled on Firefox

Reinis 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

Hi Reinis  :)


i think maybe that shaking effect come from your png ( png optimize method ) , i don't see that ugly effect with another png  even in FF , and since you have " repeat:-1 " , you don't need to set again backgroundPosition to zero :


try this :

TweenMax.to($('.frame'),5,{repeat:-1,backgroundPosition:"-" + (88 * 195) + "px",ease:SteppedEase.config(88)});

See the Pen VYbVPa by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

Yep i would second Diaco's comment above about optimizing your PNG image... since your PNG is like 263KB.. that is a pretty large file to animate through.


Depending on the PNG.. check if the PNG is PNG-8 and PNG-24 (supports index transparency like gif .. index, meaning on or off), or if its PNG-32 (supports full alpha transparency) .. 


In Photoshop if you Save for Web and select PNG-24 it will be alpha index (on/off) .. but if you check the transparency checkbox.. that will save the PNG as a PNG-32 which supports full alpha transparency for each pixel. Adobe Fireworks does have an option for saving all three PNG formats.. PNG-8, PNG-24, and PNG-32.




But it looks like your CSS sprite sheet image has full transparency by zooming in on your pixel edges.. so it is a PNG-32. You can just use PNG-8 and for your edges add a BG layer behind each drawing in your sprite that matches the BG of your project. So your edges can still have the varied degree of alpha color, but your edges BG matte layer will be underneath still allowing your edges to be smooth and not jaggy. That is one way if you need to reduce the size of your PNG-32 sprite image. Usually PNG-32 will be 3x more the file size than PNG-8. But PNG-8 is a way more efficient file format to animate sprites with than PNG-32, but you just  have do a little extra work in Photoshop to get it prepped for your sprite animation.


I hope this helps. :)

  • Like 2
Link to comment
Share on other sites

Hi again!


I tried a few examples and unfortuneatly, there's nothing with either png size or encoding.


First - we can't notice shaking on Diaco's example because this Santa alredy has all edges moving. I tried to chop off a part of it and then you can see this shaking very clear.


Second - this shaking is not happening if result of frame width multiplied with resize ratio is round number. So - if frame width is 150px and you scale it by 0.5, it's ok, but if you try 0.51, it shakes.

Check it all here:

See the Pen azWgRO by anon (@anon) on CodePen


So at this moment a have no idea how to solve it with the sprites we have. :)

Link to comment
Share on other sites

Hi Reinis  :)


this isn't from GSAP ;


keep in mind that we'r working with limitations of PIXELS ( device's screen , browser's render , background motions under pixels count , png images pixels , png optimize method ...ect  ) .


most of these ugly effects come from that limitations + browser issues , and scaled down the sprite cause to Increase that undesirable shaking in some browsers .

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