Motionity: Free Online Animation Editor with Keyframes and Masks

Motionity is an open-source animation editor that runs directly in your browser. It combines the technical capabilities of After Effects with the user-friendly interface of Canva. Users have access to keyframes, masks, filters, and a drag-and-drop media library. The entire tool is accessible without creating an account, providing a seamless experience with no credit cards or sign-up walls required.

1. Keyframes and Custom Easing

Keyframes are the foundation of any animation, and Motionity keeps the process straightforward. To begin, drag the playhead to a specific point in time and move, scale, or rotate an object on the canvas; a keyframe will appear automatically. You can manually nudge its position, copy and paste it, or delete it as needed. Clicking a keyframe allows you to set custom easing curves, letting you fine-tune the motion until it feels perfectly smooth.

2. Filters Galore

Motionity includes a variety of image and video filters. You can adjust color levels, apply blurs, or use the chroma key tool for green-screen effects. All the essential visual adjustments are built into the interface.

3. Trim and Cut Video

The tool allows for basic video editing without needing to switch applications. You can chop video clips, trim the edges, or split segments to fit your project’s timeline.

4. Layer Masks

Masks enable advanced visual techniques by allowing you to hide or reveal specific parts of a layer. This feature is essential for building complex composites and creative transitions.

5. Audio Support

You can add soundtracks or sound effects to your projects. Adding audio helps provide weight and atmosphere to your animations.

6. Media Search

The left panel serves as your asset library, categorized into Uploads, Objects, Images, Text, Video, and Audio. Each category features a search bar to help you find what you need. Images and videos are pulled directly from Pixabay, while emojis are sourced from Twemoji. Simply drag your chosen asset onto the canvas to get started.

7. Text Animation Presets

Motionity includes several text presets, such as typewriter effects, scale pops, and fades. These can be applied to any text layer with a single click.

8. Lottie Support

You can drop Lottie animations directly into your project, allowing you to expand your motion vocabulary with high-quality vector animations.

9. Pixabay Integration

Access Pixabay’s massive stock library without opening a new tab. You can search for assets and drag them into your composition instantly.

How to Work in Motionity

1. Adding Media

Select a category from the library on the left. You can click an asset to place it in the center of the canvas or drag it directly to a specific spot. Assets land at the current position of the playhead. For categories with a large selection, use the search bar to filter the results.

2. Making It Move

By default, all layers start as static elements. You can move and transform them without creating keyframes initially. When you are ready to animate, click the clock icon on a layer to enable animation. If you prefer to animate only a single property—such as scale—click the clock next to that specific setting. Once the first keyframe is created, you can add more manually using the keyframe button on the left, or simply move the layer at a different point in time; Motionity will automatically generate the new keyframe for you.

3. Timeline and Playback

The timeline is located at the bottom of the screen. You can drag its top edge to resize the workspace. Below the timeline, you will find playback controls, including options to zoom in and out, adjust playback speed, play, pause, or jump to specific frames. The spacebar toggles playback. To change how layers are stacked on the canvas, simply drag them up or down within the timeline list.

4. Property Panel

The panel on the right changes based on your current selection. If nothing is selected, you can adjust canvas dimensions, background color, and project duration. When a layer is selected, the panel provides options for alignment, layout, fill, opacity, filters, drop shadows, strokes, and other property-specific settings.

5. Canvas Navigation

The center canvas is where you compose your work. To move around the workspace, click the hand icon in the top right to use the pan tool, or hold the spacebar while dragging. You can zoom using a scroll wheel, trackpad pinch, or the dropdown menu. Select layers by clicking them directly or by dragging a selection box over multiple items. Use the transform handles to resize and rotate objects. If you make a mistake, you can undo actions with Ctrl/Cmd + Z or redo them with Ctrl/Cmd + Shift + Z.

6. Exporting

Once your project is finished, click the "Download" button in the bottom right corner. You can choose to export your work as a WEBM video, MP4 video, animated GIF, or a static image.

7. Project Save and Load

Motionity runs entirely in your browser, meaning nothing is uploaded to a cloud server. To share a project or move it to a different computer, you must export it as a JSON file. You can then import this file later to continue editing. While Motionity auto-saves your progress within the browser’s local storage, you should keep the exported JSON file if you want to ensure your project is preserved permanently.