I'm getting pixelation when using pixi.js sprites with gsap.
I doubt this is a gsap or pixi problem, I'm sure it has to do with how I'm combining them.
in the codepen example:
pixiBug on left is pixi.js & gsap and we're getting pixelation on scale down
domBug on right is DOM & gsap and edges are smooth no matter the scale.
What am I missing here?
Thanks!
See the Pen EmKqrG by philipbell (@philipbell) on CodePen
How scaling behaves in Pixi is kind of in the hands of the user as a lot it of will be determined by the type of textures you are using. Pixi does linear scaling by default. However, bicubic scaling will be done on the GPU if you're using WebGL and the base texture is a power of 2 in size, 16, 32, 64, 128, 256, 512, etc. That will enable mipmaps, which can speed things up and reduce artifacts.
Notice the difference here. The first butterfly is 200x200. The second butterfly is 256x256