Back to the blog

Animation

Glow, grain, a wave and a colour grade.

Add a glow, grain, a wave or a colour grade to an animation in your browser, nothing uploaded: on one part or the whole artboard, keyed, kept in videos.

By 5 min read

A teal star on an artboard, drawn three times as it turns and grows, over a timeline with keys for its turn, size and opacity and the easing curve beside them

A soft glow behind a logo, a little grain over flat colour, a ripple, a warmer look: KeepSimp's Animation maker has four effects to lay on one part or on a whole artboard, and to change over time. They are drawn on your device, the same way on the artboard and in every picture, video and GIF, and nothing is uploaded.

Where effects go.

Choose a part, and the inspector's Effects section has Add a glow, Add grain, Add a wave and Add a colour grade. Choose nothing, and the same section sits under the artboard's settings, for the whole artboard at once.

A part's effects work on the part with everything inside it: it is drawn on its own first, the effects run on it from the top of the list down, and it is laid on with its own opacity and blend. Each effect can be switched off, moved up or down, or taken out.

A glow.

A glow is the part's own shape, blurred, coloured and laid under it: its reach says how far it spreads, its strength how bright it is, and it takes any colour. It suits neon words, a halo behind a logo or a button that lights up when pressed.

Grain.

Grain lays fine speckles over the colour, like film: set its amount and the size of each speck. Grain pattern gives another pattern, and Changes every frame makes it move as the animation plays or holds it still.

The speckles are fixed to the artboard, so a small GIF and a large video show the same grain, and they come out the same every time, on every device.

A wave.

A wave moves rows sideways or columns up and down, along a curve that travels as time goes on: its height, its length and its speed a second can all be set. Edges are held where they are, so nothing is torn off. It suits a flag, water or heat over a road.

A colour grade.

A colour grade changes brightness, contrast, saturation, warmth and hue for everything under it. It works in OKLab, a way of describing colour made so that equal steps look equal to the eye, so brightening keeps a colour's hue and taking out saturation leaves greys that look as light as the colours were.

On the whole artboard it gives every part one look, as a grade does for a film.

Keyed like anything else.

Every number and colour of an effect has its key button in Animate, so a glow can pulse, grain fade in, a wave settle or a grade warm up as the animation ends. They follow the timeline's easing like any other key. Effects cannot be bound to live values.

Which files carry them.

Effects are our own pixel work, never the browser's filters, so a PNG, a GIF, an animated WebP or APNG, an MP4 and a WebM made in any browser carry the same pixels. On a full HD frame each one took between 35 and 72 thousandths of a second in our tests. While you edit, the artboard works effects out at a smaller size to stay quick; files are drawn at their full size.

A Lottie, a Telegram sticker, a .riv and an SVG have no way to hold these effects, so they are left out of those files, and the result says so.

Further reading

Topics: glow effect animation · neon glow animation · film grain effect · wave distortion effect · colour grade animation · animation effects · animated glow

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool