Animator - Free Web Animation Tool

Build keyframe animations visually, preview on a timeline, and export CSS or Roblox GUI code directly from your browser.

We are still improving this tool. Join our Discord for updates, suggestions, or feedback. Join Discord

Time (s) Step

Keyframe Properties

Time (s) Position X Position Y Rotation (deg) Scale (%)

Keyframes

Timeline

Duration

Step: 0.1s

Settings

Theme

Export

Trigger Looped

Export

Try it

Tutorial

Welcome to Websitecode - Animator!

This tutorial will walk you through creating your first animation.

Keyframes

Add keyframes using the buttons in the top bar or the keyframes panel. Select a keyframe to edit its values.

Properties

Use the Keyframe Properties panel to change position, rotation, and scale for the selected keyframe.

Timeline

Move the playhead to preview the animation slowly. Drag keyframes in the timeline to change their timing.

Settings

Use the gear icon in the top-right corner to customize the appearance. You can replay this tutorial anytime from there.