Black Lives Matter. Support the Equal Justice Initiative and read our statement here.
Geppetto

Geppetto

WebGL animation toolkit to create beautiful animations that also allow real-time control.

Geppetto

Geppetto logo

Geppetto is a free and open animation tool to create and embed webGL animations in a web site. This is the repository for the desktop app to create the animations. Made with Create React App and Electron.

What is Geppetto?

Geppetto consists of two parts. A desktop application to define animated images, and a JavaScript library to play them.

How does it work?

You need to create a texture file as .PNG. in Geppetto you will make layers from your texture, and compose them into your image. Next step is to add mutations to your layer tree to create motion. You can then create timelines to define multiple animations.

These animations (the created .json file and your texture .png) can then be loaded using the geppetto player and embedded in a website or electron app.

Screenshot: Animation screen

Available Scripts

Yarn scripts to get started with this repo:

  • yarn electron-dev Starts electron in develoment mode
  • yarn test Running tests
  • yarn electron-pack Create production builds

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

To learn Electron, check out the Electron documentation.

Special thanks

  • Guido Theelen, for creating the Geppetto logo

License

MIT (c) Matthijs Groen

not_used
Create layers from a texture file Create layers from a texture file
Combine the layers and add control to your image Combine the layers and add control to your image
Use controls to create animation timelines Use controls to create animation timelines
You can even create talking characters You can even create talking characters

Something missing? Edit this app.

Keyboard Shortcuts

Key Action
/ Focus the search bar
Esc Focus the search bar and cleans it
Select the next search result
Select the previous search result
Enter Open the selected search result
cmdEnter Ctrl+Enter Open the selected search result in a new tab