Back to the blog

Animation

Draw it, then make it move.

Make a 2D animation in your browser, nothing uploaded: draw shapes and words, give them keys and easing on a timeline, and save an MP4, GIF, WebP or PNG.

By Updated 6 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

Most animation programs ask for an install, an account or a subscription before you have moved a single shape. KeepSimp's Animation maker runs in your browser instead. You draw, set keys on a timeline, and save a video, a GIF or a picture. Nothing is uploaded, there is no account, and the files carry no watermark.

Say what you want to make.

The first screen asks one question: what do you want to make? A moving logo or icon, a loading animation, an animated icon and a Telegram sticker each open a small animation that already moves, ready to change; A 3D model that moves opens a 3D scene. Open a file takes a Lottie, a TGS, a dotLottie, an SVG, a picture or a project you saved before.

A starter is made of the editor's own shapes and keys, nothing else, so every part of it can be changed or taken away.

Draw what will move.

Draw rectangles, ellipses, polygons, stars and triangles, paths with the pen (with handles to bend each curve), and free strokes with the pencil and the brush. The bucket fills a closed area, the Shape Builder joins shapes into one or cuts one out of another, and the eraser takes parts away.

Words are written in the fonts that come with the site and drawn from their letters' outlines, so they look the same on every computer. Part of a text can have a font, weight, size, colour and spacing of its own, and a text can wrap at a width. SVG files and pictures can be brought in beside what you draw.

Each fill and stroke can be a solid colour or a linear or radial gradient. Strokes can be dashed, shapes laid over what is under them with a blend mode, and edges softened.

Make it move with keys.

An animation is a set of keys on a timeline. A key says what something is like at one moment: where it stands, how far it is turned, its size, how see-through it is, its colours. Set one key at the start and another later, and the maker works out every frame between them.

Keys can hold the points of a path, so a shape can change its outline, and the stops of a gradient, so its colours can travel. A timeline can loop, play once, or play there and back, and a work area plays only the part you are working on. One project can hold several timelines.

Every change can be undone, one step at a time, back to where you began.

Choose how it moves between keys.

Easing is how something moves from one key to the next: steadily, slowing down as it arrives, or springing past and back. Each key has one. The presets are named for what you see: Steady, Jump, Smooth, Speed up, Slow down, Speed up, slow down, Overshoot and Spring.

For a movement of your own, the graph editor shows the curve and lets you drag its two handles. The curves are the same kind CSS uses on web pages.

Save it for where it will go.

Export asks where it will go. Social media or a video makes an MP4. A chat or an email makes a GIF, which plays in every app. A website or an app makes an animated WebP with a clear background, which every current browser plays. A still picture saves one frame as a PNG, or as an SVG that stays sharp at any size.

Videos and GIFs are written on your device by the same engine as KeepSimp's Animation converter, and each file is opened again and checked before it is offered. None carries a watermark.

A project can be saved as a .ksanim file to open again later. It is kept on the device only while its switch is on. An app or a website's code gets a Lottie JSON, a Telegram sticker a .tgs, and More options adds an animated SVG and a dotLottie. An animation that reacts to a pointer is saved as a .riv, with its state machines, and a character's bones, layouts, text and sounds go into the .riv too. A 3D scene is saved as an animated GLB, a video or a GIF.

Further reading

Topics: 2d animation online · animation maker · free animation software · keyframe animation · motion graphics online · animate svg · no watermark

A little less theory. A little more doing.

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

Try the tool