Constellation Animation Creation Interface

This is a simple user interface I developed to create “constellation animations” from animated GIFs. The animations are created in Javascript using the GreenSock JavaScript Animation API, and this tool will generate the code for you. Follow the steps to the left to try it yourself. Note: Page scroll has been intentionally disabled.

Pause | Play | Restart | Step forward | Step back

Step One

Click on the horse's "joints" in the image to add dots.

See example.

Next Step

Step Two

Now, you will animate the dots for each frame. Click "step forward" to advance the GIF to the next frame and drag all the dots to where the joints should be in this frame. Do this for each frame you want to animate. When you are done, click "Show the Code".

See example.

Show the Code

×

Copy & Paste into this CodePen Template

SVG/HTML

Javascript

var t1 = new TimelineMax(); t1

Close

×

Step One: Example

Close

×

Step Two: Example

Close