Home » Tools »

Spirit Spirit

The ultimate tool to create high-quality animations directly in the browser.

Animation

Visit site »

Spirit Studio

Spirit Studio uses keyframes, just like other industry-standard animation tools. Simply change an element attribute, set a keyframe, rinse and repeat. It’s that easy!

Live edit

Edit your animations live in the browser and see changes immediately. Consider Spirit as the WYSIWYG editor for web animations. Animating is fun again, seriously.

Play / control

Spirit Studio exports animation data and comes with a web player to control and play your created animations in production. Lightweight and extremely powerful.

Live Edit

It’s almost plug and play, simply connect Spirit Studio to any webpage, add elements to your animation and start animating in real time.

No Code Required

With Spirit Studio you can visually compose your animations, whether you know how to code or not. Focus on the aesthetics and timing of your animation.

Iterate

You can fine-tune your animations anytime and in every detail, simply (re)connect a web page and edit your animations. Yes, even in production.

Next

As Spirit originated to be a web animation tool, we are working hard to make Spirit available for other platforms.


Alternatives to Spirit

Bodymovin

An After Effects extension to export animations for web.

Web development Animation

Drama

Draw user interfaces, create interactive prototypes and make animations.

Prototyping Animation

Flinto

Create interactive and animated prototypes of app designs.

Prototyping Animation

Flow

Animate Sketch designs in seconds and export production ready code.

Design-to-code Animation

Hype

Create HTML5 animations and interactive web content.

Animation

Keyframes

Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.

Web development Animation

Looom

Flipbook animation reimagined.

Animation

Lottie

An iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Web development Animation

Mokup

Create prototypes that look and feel like real apps.

Prototyping Animation

Principle

Create animated user interfaces and prototypes.

Prototyping Animation

Story Creator

Simple online video editing for digital creators.

Animation