Sprite sheet animation shaking when scaled on Firefox

[Reinis]

Hi!

 

I'm trying to scale a sprite sheet animation, it works fine in IE, Chrome, Opera and Safari, but it has ugly shaking when scaled down in Firefox.

 

You can see it here:

 

Any ideas how to solve it?

 

Thanks!

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

[Diaco]

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

[Reinis]

Thank you, Diaco!

 

Seems that I have to investigate that png and make it better. Will do!

[Jonathan]

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.

 

http://www.w3.org/TR/PNG/

 

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.

[Reinis]

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.

[Diaco]

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 .

[Jonathan]

Reinis are you seeing this on Firefox on a Mac or on Firefox on Windows?

 

The reason i ask is because i am not seeing the shaking in Firefox 35 on PC Windows 7 (64-bit).