From idea to app

Thanks to everyone who signed up for the newsletter and showed their interest! If you haven’t signed up yet, make sure you do at https://spiritjs.io.

The last few months I’ve been working dedicated on Spirit and cancelled quite some freelance projects to keep the momentum. Things are finally coming together and I really enjoy the development process.
Although I do make progress, I realise I’m not there yet. There’s still some work to be done before I give it to the public. So please hang in there :)

I already have some awesome features in mind, features that will make Spirit a killer animation tool! But first let’s focus on a minimal feature set for the beta and ship it as soon as possible.

Prototyping

After the idea for Spirit was born, I started thinking.. What technology to use? How should the interface look like? What features to include in the beta and which can wait for future releases? So many questions which needed to be answered before I could actually start building.

First I did some extensive research about existing tools and UX in general. I started to test and prototype every isolated part of the application, this way I was able to solve conflicts more quickly and make decisions alongs the way.

Instant feedback

Spirit needs to be feedback driven. Every action the user takes, needs to be reflected visually. For me its important that the user doesn’t get bothered by any complexity, Spirit should be doing these abstractions for you.

A brief preview of what you can expect

Animate CSS properties.

You can easily add any css property to a keyframe and animate it to a point in time. This applies to all elements that are represented in the Document Object Model. (HTML, SVG.. it’s all up to you).

Free transform

The free transform tool gives you the ability to apply transformations visually, like you already know from Adobe Photoshop.

Instead of only working with numbers, you can now literally drag your elements around and apply transformations directly on your website.

Easing

Timing is everything. Easing is a core feature that really needs to be build for the beta. You’ll be able to create more subtle animations. In the beta you are limited to a fixed set of easing methods. But don’t worry, I’ve got you covered in the future!

Export

This tool wouldn’t be of any use if you wouldn’t be able to show the animations on your website right? So there you have it, export feature is included in the first beta as well.

Make sure that you are subscribed, so that you won’t miss any news. I’ll keep you posted on the progress. Please keep in mind that the beta will only be available for subscribers.

Hope this get’s you as much excited as I am!