Geppetto Matthijs Groen

Use this command to install Geppetto:

winget install --id=MatthijsGroen.Geppetto -e

Geppetto is a free and open animation tool to embed webGL animations in a web site.

Geppetto is a free and open-source animation tool designed to create and embed WebGL animations in websites. It empowers users to craft visually appealing animations by leveraging layer-based compositions and mutations, all within a web application. Geppetto is built with accessibility and flexibility in mind, making it suitable for both small-scale projects and large-scale applications.

Key Features: Geppetto offers robust support for creating layer-based animations using PNG textures, enabling complex visual effects through mutative transformations. It includes timeline functionality for organizing multiple animations and exporting them as JSON files compatible with the Geppetto Player library. The tool is accessible via web browsers and can be installed on Windows systems using winget.

Audience & Benefit: Ideal for web developers and designers seeking to enhance their projects with interactive and engaging content, Geppetto simplifies the creation of WebGL animations without requiring advanced 3D modeling skills. Its modular design allows for seamless integration into various workflows, ensuring that creative visions are brought to life efficiently and effectively.

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