Motify install

Install Motify locally.

Motify is an open source HTML and GSAP motion graphics editor that runs on your own machine. A normal web project gives you an editable HTML composition, a scoped stylesheet, and a JavaScript timeline you can refine visually and render to video.

Keep your composition files and media together so every animation stays portable and version-controlled alongside your code.

Install Try Demo

Requirements

  • Node.js 20.19.0 or newer and npm for the CLI and local editor.
  • FFmpeg on your PATH to render the timeline to MP4.
  • Any modern browser — the editor runs at localhost.

No account, API key, or cloud upload is needed to install and edit. You can create projects, animate, and preview fully offline.

What you get

  • An HTML template, scoped CSS file, and GSAP timeline describing the composition.
  • A visual canvas and timeline for adjusting position, timing, and motion by hand.
  • Local media files that can be referenced directly by the browser composition.
  • Local MP4 export, so finished animations never leave your machine.

Install locally

Requires Node.js 20.19.0 or newer, npm, and FFmpeg on PATH for MP4 export.

git clone https://github.com/COPPSARY/Motify.git

Clone the repository, install its dependencies, and open the editor locally. The composition source stays in normal HTML, CSS, JavaScript, and TypeScript files that can be inspected and committed with the rest of your project.

Return to a project

npm install && npm run dev

Starts the local editor with live preview.

Open the editor only

npm run render:video

Renders the bundled composition frame by frame through Chrome and FFmpeg.

The Motify workflow

Author a composition, edit it visually, then export — in four steps.

1. Describe the animation

Describe the motion you want — a logo reveal, feature walkthrough, or social clip — then author the scenes and choreography in HTML/CSS and a GSAP timeline.

2. Edit on the canvas

Move layers, retime keyframes, and change easing directly in the editor. Nothing is baked into an opaque render, so every property stays adjustable.

3. Iterate in source

Because the project is readable web code, you can inspect a scene or adjust one timeline tween without rewriting the whole animation.

4. Export to MP4

Render the timeline locally with FFmpeg and drop the result into a launch page, a demo, or a social post.

Assets folder

Keep project media beside the HTML composition and reference it from the browser DOM.

my-video/
  composition.html
  timeline.js
  index.ts
  assets/
    logo.svg
    product-shot.png
    soundtrack.mp3
  • Place images, videos, SVGs, GIFs, Lottie files, and audio in assets/.
  • Use clear filenames and keep original aspect ratios.
  • Keep visual source and timeline changes in version control.
  • Commit the source and assets together so teammates get identical results.

Install FAQ

Common questions about setting up and running Motify.

What do I need before installing Motify?

Node.js 20.19.0 or newer, npm, Chrome or Chromium, and FFmpeg available on your PATH for video rendering.

Do I need to install Motify globally?

No. Motify runs locally from a normal Vite project. Clone the repository, install dependencies, and start the editor with npm.

Where does Motify store my animation project?

A composition uses an HTML template, scoped CSS, a GSAP timeline, and a small TypeScript adapter. Keep those files and any media assets together in Git.

Can I edit a Motify project with a coding agent?

Yes. The source is plain HTML, CSS, JavaScript, and TypeScript, so any coding agent can inspect and adjust a scene or timeline directly.

How do I export my animation to MP4?

Run npm run render:video after installing Chrome/Chromium and FFmpeg. Motify seeks the browser composition frame by frame and pipes PNG frames into FFmpeg locally.

Is Motify free and open source?

Motify is open source and available on GitHub. You can run the editor locally, inspect the source, and contribute to the project.

Need more?

The full documentation covers HTML composition authoring, SVG animation, GSAP presets, easing, browser rendering, and video export.

Read Documentation GitHub