gui for GSAP
get itLearn

What's This?

A timeline based animation tool in a browser extension for animating your web content in its original context.

How it Works?

1. open animachine on any web page
2. select nodes for the timeline with css selectors
3. animate
4. save the animation as a .js file
5. include the .js into your app
7. apply the animations and use them as a GSAP timeline
8. open animachine again and continue the editing
see the full docs here

Why is this needed?

We have great tools to make animations for the web (like Adobe Animate, Google Webdesigner or Animatron) but all of these are only for making sandboxed animations and embedding the boxes somewhere (usually in an iframe). If you need to animate some inner part of your project (ex. when a dialog appears or a game character jumps and walks) it has to be coded by a programmer. When this animation has to be long, artistic or done by somebody who is not a skilled programmer, this work can be tedious or almost impossible which can prevent us from seeing more fine and sophisticated animations on the web.

SHould I Use This?

No, at the moment this is a "proof of concept" and not a matured tool. But if you interested in the idea you should definitely give it a try and keep your eye on it (i tweet and mail about the updates) and maybe help with your thoughts (you can open issues here).


This tool is not done. Subscribe for updates!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form


in browser

Open on any site


With simple inline editor

DOm picker

Pick a node and it will generate the css selector


Handy and keeps getting handier


As you like it!

js export

Save, reload, and use it as a GSAP timeline

And more coming...