← Blog

Smoothing made the animation worse

The animation on the home page steps its quality up as it goes. Easing one of those steps made it more noticeable.

The hero animation doesn't start at full quality. It starts simple, watches how well the machine is coping, and adds more detail if it can handle it.

The trouble is you can see it happen. It steps up a couple of seconds in, and there's a visible glitch when it does.

It adds three things at once - the resolution, the frame rate, and a layer of noise. I could have guessed which one was doing it. I'd have been wrong! So I measured it instead.

The fix...

It was the noise (a layer between one frame and the next). Fading it in over about a second sorted it, which is one extra line in the shader.

So I tried the same thing on the resolution. Four small steps instead of one jump.

It made it worse.

You notice a resolution change however small it is. I think it's because the whole picture is being redrawn on a different grid, so doing it in four little steps doesn't soften anything. It just means you notice it four times.

So the resolution still changes in one go. I've left a comment on it, because it looks like something I forgot to finish.

The other thing I'd take from it: add quality, don't remove it. It allows you to ramp up smoothly, instead of starting high and potentially straining the machine, causing the glitches you were trying to avoid.

If any of it is useful on your project, say so.