Or, shouldicontinuecanianimate.
This is an open question to the front-end development community. I have a website and want to make it better. But I need to know if it’s actually valuable before putting in more work.
Back to…
A couple of years ago, as part of a building some animation prototypes, I ended up creating a small library that collates which CSS properties can be animated, and how they animate. At the suggestion of Sean Curtis, I turned that data into a site called canianimate.com. It’s inspired by caniuse.com but only for CSS animations and transitions.
I launched a basic version of the site and had grander plans for it. Ultimately I wanted to add a bunch of interactive graphs that showed better details of how different types of properties were interpolated and transitioned.
But a little while after that, I attended a conference where the theme of several talks was performant animations. All the advice was to animate only the opacity and transform properties, which matched the trend of advice coming from the wider dev community — especially those working for browser vendors.
While it was definitely good advice (and still is today), it effectively took the wind out of my sails. What was the point of putting more effort into explaining the minutiae of all the different properties’ animation rules, when the general advice is to only use two of them?
…the Future
So here we are, 2 years later. The domain is coming up for renewal and I need to decide if it’s a project worth keeping alive. But this is a not a choice I can make with only a single data point.
This is where I ask for your opinion.
- Is canianimate.com a useful reference?
- If not, could it be? What would make it better?
Let me know in the comments, or ping me on Twitter – @iamnotyourbroom.
P.S. To get an indication of some of the plans I had for the site, have a look through the issue backlog. I’ve also included some of my draft sketches below.
A rough sketch of how to show the interpolation of simple number values.
A rough sketch of how to show the interpolation of colour properties.
canianimate seems still pretty useful!
Thanks for it!
I like the part where you quote and link the specifications, that are some times hard to find.
But you should totally add advice about performance !
When I ask “can I animate left property”, I expect this website to advise me to use a transformation.
Also when I ask “can I animate height property”, I expect to have an explicit warning about the “auto” value.
Finally, I think the “URL permalinks” issue is important.
It helps developpers to share links and sometimes to add link directly in their code comments
Hey Gilmore,
Please continue this project! I only realised canianimate existed because of a tweet from Rachel Nabors, otherwise I would’ve been using it way before.
And yes, the current thinking is to animate just those two properties – but things could change again, and is the purpse of the site you built performance, or is it to demonstrate what _can_ be done?
Even if nothing else is done to what you have alread built, I can see myself using it often, and recommending it to others who might ask about css animations in the future.
Thanks for building it – please dont let it end here.
Thanks everyone for the comments here and in other channels. I’ve realised it’s a project worth keeping, but it just needs some tweaks to better fit its purpose (and tie in with other related data sites such as csstriggers.com for performance info).
Looking back, I’d given up on promoting the site after various lukewarm responses a while ago. That in turn meant that I didn’t get any more feedback, thus reinforcing my lack of positivity about it – a vicious cycle.
With the benefit of hindsight, I just hadn’t picked the right targets. But with the large rise of UI animation discussions – and especially the Web Animations API specification becoming a reality – the time is now ripe.