Words, sound and live values, in one animation.

Add text, sound and live values to an animation in your browser, nothing uploaded: styled words, typing fields, screen reader labels, components and sounds.

By Suraj Kumar5 November 20268 min read

An animation for a website or an app often has to do more than move: show words that change, take what someone types, be read out by a screen reader, play a click when a button is pressed. KeepSimp's Animation maker does each of these in your browser, with nothing uploaded, and keeps them in the .riv it saves.

Words with parts of their own.

Choose some letters of a text and give them a font, weight, size, colour or letter spacing of their own, such as a price in bold or one word in a brand colour. Typing keeps each part's look where it was. The fonts are the ones that come with the site.

Wrap onto more lines breaks a text at a width you set: between words, between the characters of scripts written without spaces, and between letters for a word too long for the line. Letter spacing and the wrap width can be keyed, so a line can open out or a column narrow while it plays.

A field people type into.

Make it a typing field turns a text into a field. In Try it, it is a real text box laid over the words, with its caret and selection drawn where the letters are, so it works with the keyboard, with the input methods other languages use, and with screen readers. A field can show words of its own while it is empty.

What is typed lives only while you are trying it, and is never saved into the project.

Say what each part is.

Under For screen readers and keys, a part can say what it is (a button, a link, a picture, a heading, text, a checkbox, a slider or a text box), what a screen reader says for it, and its place in the keyboard order. These are the roles web pages give elements with ARIA.

In Try it, each becomes a real element with that role, so a screen reader names it and Tab reaches it in that order; Enter or Space presses a button. An SVG, still or animated, gives each part its role and label too.

One artboard inside another.

An artboard can be placed inside another as a component, such as a card in a list or an icon in a button. It is fitted into the box you give it: inside it, filling it and cut at its edges, stretched, or at its own size. It plays its own timeline, going round as the outer artboard plays, or its own state machine, which presses inside its box reach.

Its state machine's inputs can follow the outer one's: when an input of the outer artboard changes, the one inside is set to match. Change the artboard, and every place it is used changes with it.

Values the page can change.

A view model is a list of values the animation shows: numbers, text, switches, colours, choices from a list, and triggers. Each can be bound to a part's number (where it stands, its size, how see-through it is), to a colour, to a text's words, or to a state machine's input.

The part can follow the value, the value can follow the part, or both, and a number can be mapped from one range to another on the way, so a level from 0 to 100 can make a bar from 0 to 240 wide. The website or app playing the .riv changes the values through the runtime's own view model API, and the animation follows: a score, a name or a price, with no timeline made for each. In Try it, a typing field bound to text holds the value as its typed words.

Sounds, played by events.

Bring in a sound: an MP3, WAV, OGG, FLAC or M4A file, checked on your device and carried in the project. An event of the kind Sound plays it at a volume you set, fired by a key on a timeline or by a listener, such as a click when a button is pressed.

It is always heard while you try a state machine. While a timeline plays it is heard only with Play sounds on, which starts off every time.

An MP4 or WebM video of a timeline has every sound its timeline fires mixed in at its time. A state machine's sounds depend on what people do, so they are not in a video, and that is said. A .riv carries the sounds, OGG and M4A written as WAV since Rive's runtime plays MP3, WAV and FLAC. A Lottie, an SVG or a GIF has no sound, and the result says so.

Kept in the .riv, and checked.

A .riv keeps words as text, with their runs and styles, and carries each font it uses inside the file, with the letters it does not use left empty to keep it small. Roles and labels are kept too. A typing field is written as its text, and the keyboard order is left out, since a .riv has no number for it; the result says both.

Rive's own runtime reads every .riv back before it is offered, and its frames are compared with the editor's. A Lottie or an SVG writes words as their letters' outlines, a component playing a timeline as a piece of its own, and every bound value as it starts, and says so. Nothing leaves your device.

A little less theory. A little more doing.

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

Try the tool