All tools

2D skeletal animation

Rig a character with bones in your browser: limbs bound to bones so they bend, a hand or foot that reaches for a target you drag, and a loop you can change. Free, with no account or uploads.

Start from a figure with a skeleton: its arms and legs bend with their bones, and a hand or a foot reaches for a target you drag. Change its loop, then save it.

Rig a character with bones

A .riv or a Lottie plays as it is; an SVG becomes shapes you can move; a picture is placed on the artboard; a 3D model opens in the 3D editor.

  • RIV
  • Lottie
  • TGS
  • SVG
  • PNG
  • GLB
  • KSANIM

Stays on your device. Nothing is uploaded.

How it works and help

A little help along the way

Follow these steps. Every option is explained underneath. Everything happens in your browser; nothing you draw or bring in is sent anywhere.

  1. Say what you want to makeChoose a moving logo or icon, a loading animation or an animated icon to open a small animation that already moves, ready to change. Open a file takes an SVG, a picture or a project you saved before; you can also drop an SVG on the page.
  2. DrawDraw rectangles, ellipses, polygons, stars and triangles, paths with the pen, and strokes with the pencil and brush. Fill closed areas with the bucket, join or cut shapes with the Shape Builder, and write words in the site's fonts.
  3. Animate with keysA key says what a part is like at one moment: its position, turn, size, opacity or colours. Set a key at one time and another later, and every frame between them is worked out for you.
  4. Choose the easingEach key says how the movement goes on to the next: Steady, Jump, Smooth, Speed up, Slow down, Speed up, slow down, Overshoot or Spring, or a curve of your own in the graph editor.
  5. Play itPlay the timeline to watch it. It can loop, play once or play there and back, and a work area plays only the part you are working on.
  6. Export itSay where it will go: social media or a video makes an MP4, a chat or an email a GIF, a website or an app an animated WebP with a clear background, and a still picture a PNG or SVG of one frame. Each file is checked before it is offered.

Questions people ask

What is 2D skeletal animation?
A figure is given a skeleton: bones joined in chains, such as an upper arm and a forearm. Its parts are bound to the bones, each point of a path or a mesh following up to four of them by its weight, so moving a bone bends the limb. You set keys on a few bones instead of on every point.
How does a hand reach for a target I drag?
A reach constraint (inverse kinematics) turns the bones of a chain so that its end touches the target: two bones are solved exactly, longer chains bend joint by joint as Rive's runtime bends them, and the bend can go either way. Its strength can be keyed, to let go of the target over time.
Which files keep the bones?
A .riv keeps the bones, bindings, meshes and constraints as Rive's runtime plays them, and says what it cannot hold. A Lottie, an animated SVG, a video or a GIF has the movement written in frame by frame; a picture bent by a mesh stays whole in a Lottie, and the result says so.

This page is the Animation maker, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Animation maker's own page.

Read the step-by-step guide

Guides

Same tool, other jobs

Tools nearby