Animate the web!
Start new thread
Chris Messina

Spirit - The animation tool for the web.

by
Raycast
•

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

Add a comment

Replies

Best
Daniel Roger Casanova
Couldn't try the software
Patrick Brouwer
Maker
@daniel_roger_casanova Hi Daniel, we're working on a trial right now. Available soon!
Patrick Brouwer
Maker
@danirogerc start your trial at https://spiritapp.io/pricing 🙌
Damjanski
1/2 <3 - pricing is pretty high though
Ryan Hoover
This is giving me flashbacks to my days playing around with Flash
Patrick Brouwer
Maker
@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!
Brown Tex
Seems interesting
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
Maker
@duilen thanks for your feedback Dane! Good points, we'll put it on our backlog.
Nelson Oliveira
Sound good! Where is the trial? Could we test the tool? Let me know: nelson@matefy.co
Patrick Brouwer
Maker
Patrick Brouwer
Maker
Trial is now available 👉 https://spiritapp.io/pricing
Heather Daggett

I use GSAP and had high hopes for this tool, but it felt cumbersome. It might be better for those who can't write code, but for me, code is faster and more flexible.

Pros:

Uses GSAP Visible timeline

Cons:

Can't drag-and-drop objects or resize with handles, need to choose properties from menu Not able to select nested groups in SVG

Oren Mizrahi

was looking for a decent svg animation studio that works with windows.

Pros:

looks good in promos. pricing seem to have been lowered.

Cons:

no windows app.

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

First
Previous
1234
Next
Last