p/spirit
Animate the web!
Chris Messina
Spirit — The animation tool for the web.
Featured
69

Spirit Studio is an animation tool that helps designers and developers creating and managing their animations real time in the browser.

✔︎ Super easy to use

✔︎ Live edit animations directly on your web page

✔︎ Animate SVG/HTML

✔︎ Timeline editor

✔︎ Import/export JSON and play animations in production using the Web Player

Replies
Ryan Hoover
This is giving me flashbacks to my days playing around with Flash
Patrick Brouwer
@rrhoover haha yes it is! Actually Flash wasn't that bad at all imho. We just lack of good tools nowadays. Hopefully we can change that soon!
Jonno Riekwel
What a "dutch" pricing model haha. I usually like seeing the app before spending money on it. But I'm surprised that there's not even a screenshot of what the tool looks like and how it might work. Looking forward to giving it a try when there's a trial version.
Lorenzo Bruno
Nothing against Spirit in itself but to be honest I feel like this "web animations" thing is going out of control, just like we lost control of it with Flash. Plus, these days if you are designer you are expected to spend $50+ a month to design and prototype even the simplest app. At some point we'll realise we over engineered the process so much we'd be better off coding the thing rather than designing it using 3 or more different pieces of software.
Elijah Murray
Really wish I could watch a video tutorial to better understand the product, without having to read through the Getting Started materials.
Patrick Brouwer
@elijahmurray You're absolutely right, we're working on examples, tutorials and screencasts. Sign up for our newsletter and we'll notify you with new content, thanks!
Damjanski
1/2 <3 - pricing is pretty high though
Dane Lyons
Kind of surprised at some of the negative comments. It isn't super difficult to roll your own basic animation for the web but slightly increase the complexity of the animation and things get tricky fast. If this tool saves you an hour per month, it's worth the price. But the UX of the timeline editor does need some work. Here are a few thoughts based on working with it for about an hour today. 1) Popping up the timeline editor in a new window is ok if you've got a massive monitor but a real pain if you're using a laptop. I'm using a 15in Macbook Pro and it feels too small to effectively use. Maybe it would work better as a tab in developer tools rather than a popup. Or if it's a popup, take over the full screen and show the element being animated above the timeline. 2) I don't see a way to line up keyframes from different elements. It's nice to be able to quickly drag a keyframe out and see how that impacts the animation but it's hard to make micro adjustments to get things to line up perfectly. I ended up giving up on using the interface and manually adjusted the exported JSON file. 3) I tried to build an animation to draw shapes which requires the stroke-dasharray and stroke-dashoffset hack to work. This requires you to load your shape into the browser and pull up the console to measure the length of the shape to figure out what to use in the dasharray. Then after copy and pasting the length, the timeline tends to round my floating number to an integer which is pretty frustrating. I think if someone is using an animation with a dasharay, there should be a button to measure the length of the shape and insert it as the value for the keyframe.
Patrick Brouwer
@duilen thanks for your feedback Dane! Good points, we'll put it on our backlog.
Jonathan Kelley

I would say they need to do a lot more tutorials or guides so beginners can get to grips with it easily.

Pros:

Smooooth as butter animations.

Cons:

Steep learning curve.

d a n n y
"Price Elasticity of Demand"
Sadok Cervantes R.
I've been waiting for this since 2016 when you announced it, a GSAP timeline editor is very much needed, but I am super disappointed that you chose a subscription-based model just for the sake of making more money. What happened to the one-time fee for a year worth of updates and free use? This really makes no sense to pay on a monthly basis since I'm not using your resources all the time, it's not like it's cloud based or anything. Very disappointed.
Sadok Cervantes R.
And the sad thing is I'm not the only one with these thoughts, and you are playing deaf with people that would be passionate users of this product.
Patrick Brouwer
@sadokx Sorry to hear you’re not happy with the pricing. I really think Spirit is definitely worth it, as it is a game changer in the field of web animation. Besides, with a subscription-based model you’ll enjoy all the new features once they come out. There are some pretty cool features on the roadmap that will be available soon!
Dexter
a subscription model for a tool (especially at this price) that doesn't own an entire workflow (ui design / prototyping or production) seems insane.
Jason Sooter
No Trial is ridiculous! Available soon is not an acceptable response. Product Hunt is failing me lately
Patrick Brouwer
G G
Too expensive, everyone has subscription greed. $12 a month. Get Tumult Hype for a one time fee, does the same and so much more.
Amrith
I remember seeing this few months ago when it was still a concept/private beta, can't wait to play with it now that it's finally out! What features do you plan on adding to this soon, @patrickbrouwer?
Patrick Brouwer
@amrith Some really nifty features are on the roadmap, to list a few: - Custom ease (draw your ease curve) - Group in groups, compose master timelines together - Bi-directional communication - Free transform tool on your web page - SVG path editing tool - Add Javascript objects to timeline (live edit for example a ThreeJS camera) - Design-tool integrations - Design-tool agnostic integration (drop a SVG on the app, changes are reflected on the web page instantly and can be animated without any effort). - A lot more! So excited!
Aviran Revach
Wow 12$ billed Yearly (144$), 15$ quarterly (that's 180$ Yearly😱). Not even a month based price. that is really awful. Just out of curiosity, who are your audience ? It should have been Freelancers and small Agencies- they are the first who cares about these kind of animations, and this price really TOTALY missed that audience. Freelancers are not going to pay half of their "Sketch" price on an small early stage animation software, they really can't. these animation are cool but they are not worth as a whole webflow account, really. It should have been like this 1) Free for use, with downgraded exporting. maybe without, like webflow. 2) 8$ for a *monthly* account you guys. especially if these are the features available today. it is really not worth better than that (yet! this is very promising if we get additional value and need less software around it) 3) 5$ for a yearly. thats 60$. this is high but fair for TODAY. If adobe will update Animate for these features (and they should have, for a long time), or webflow, or even Studio for invision- that whole thing is compromised. that's why i'd grab those newbies today, and those freelancers. get them addicted and loyal while you can. And with these prices? this product is only for enterprises :/
Nelson Oliveira
Sound good! Where is the trial? Could we test the tool? Let me know: nelson@matefy.co
Dean Brady

Want to love this but you need a trial version or at least a lot more demos videos. And as many have already called out, make the pricing affordable for what you are competing against.

Offer some intro price or free version with a watermark or something. Add some templates or something to get people started.

Hope you listen to the community feedback, there is an interest...

Pros:

Looks promising

Cons:

Too expensive, no trial, requires player

Avinash Seth

Saw the tweet saying "directly from browser" and landed on page saying, we are only available on mac

Pros:

Could not use it, so cannot say anything

Cons:

not available for window

Daniel Roger Casanova
Couldn't try the software
Patrick Brouwer
@daniel_roger_casanova Hi Daniel, we're working on a trial right now. Available soon!
Patrick Brouwer
@danirogerc start your trial at https://spiritapp.io/pricing 🙌
Jovis Joseph Aloor
For such a product there must be tons of video content to back its claims. At least you should have a video showing all those cool features in action. Now i have to download the whole stuff to get to know what it is. But don't worry about me. i'll definitely give it a spin. I've already tried out HAIKU and it had all the bells and whistles but at the end of the day it felt very clunky and it was very difficult to create an animation in it. I hope this to be my goto tool for creating micro interactions
Jovis Joseph Aloor
WTH... you need to have a paid license to just try it out !!. I appreciate your confidence in your product. But lets just face the reality, today there are a ton of design tools releasing daily and on what basis should I spend that kind of money just based on your claims. You guys should've at least given a 15 day trial. As a SASS owner myself i can imagine why you guys took this route, but especially this market is really tough. You guys should rethink about your pricing. (btw I think the your annual pricing model is reasonable. But without a free trial period it doesn't makes sense)
Dean Brady
@jovisjoseph He'll reply that they have a trail in the works but seriously, if it wasn't ready, why launch? I paid for the year just to give it a try and already am asking for a refund. Too many options out there.
Alex White
Looks very cool, but I'm not about to pay a subscription fee for this (especially when it costs more per month than Setapp!)