Why I am building SpiritJS

Patrick Brouwer
3 min readMar 8, 2016

It’s been exactly four weeks ago since I released the landing page for SpiritJS.

To be honest, I didn’t expect to receive so much positive feedback from all over the world. This makes me even more excited to work on the tool.

You might be wondering, why another animation tool? There are already so many tools on the market.

I would love to give you some insight on why I am building SpiritJS and why I think this is going to be worthwhile.

The way we create and use the web has changed over the years. Not only the tools that were available at that time, but also the global understanding of what the web should look like and how we should interact with it.

Web technology is growing rapidly and new frameworks and libraries emerge every day. However, I do feel there’s a huge gap between code (in terms of development) and the way we create and implement animations. Making animations for the web is still a tedious and time consuming job, which unfortunately involves a lot of code. Wouldn’t the web look better if it took less time to create amazing things.

It’s really impressive to see what we can do with CSS animations nowadays. For instance take this amazing animation on codepen (by David Khourshid)

Creating such an animation takes a lot of time (just look at the source code). You need to get familiar with the code to fully understand what’s actually going on. Whether you create advanced animations in CSS or in Javascript, there is always a lot of code involved and therefore it depends on a strong mental model.

What if your clients want to have a slightly different animation and some modifications need to be done? You’ll find yourself plowing through the code for hours.

Animators and designers don’t want to be bothered with heaps of code at all, they want to play and see results immediately.

I am strongly inspired by

’s talk called “Inventing on Principle. Although this talk is from 2012, it still applies today! If you haven’t seen it, you should definitely give it a try.

As a creative frontend developer I always play with the latest tools, frameworks and libraries. My development stack changes frequently and I can honestly say that there doesn’t exist a framework that rules them all.
It’s better to grasp the abstraction than becoming a guru in one specific framework. I noticed that every framework has a different approach of implementing animations, there is no standardised way of doing this. The urge to create an independent tool that can be used in any framework was born.

I started working on SpiritJS almost three years ago. I needed something to speed up my workflow to create animations for my clients. It turned out that I was using the same tool over and over again for every project.

SpiritJS is reintroducing the timeline again, giving you realtime feedback! Where other tools create boilerplate HTML that is hard to implement into your existing codebase, SpiritJS respects your HTML and code and doesn’t mess things up. With the SpiritJS API you can easily integrate it into anything you want and modify your animations anytime.

I don’t want to keep this for myself, that’s why my new year’s resolution for 2016 is to get SpiritJS out there for everybody to use!

--

--