This has been a long time coming and I’m excited to finally put it out into the world. I’ll be hanging out in the #animations channel on the Elm slack in case anyone has any questions!
Here’s the original talk I gave at Elm Europe, The Immutable Animator’s Toolkit.
TLDR - This library takes an approach of turning a value into a Timeline value where you can animate between the states. This means you’re animating based on state you’re already tracking. If you want, the library can dynamically generate CSS keyframes for you for some easy performance!
So, an example of animating a timeline of Bool for a checkbox, is roughly the following:
-- in your model
{ checked : Animator.Timeline Bool }
-- in your view:
div
[ Animator.Inline.opacity model.checked <|
\checked ->
if checked then
Animator.at 1
else
Animator.at 0
]
[ text “👍” ]
The Goal of a Continuous UI
Animation can either be a nuanced, playful helper in your UI, or it can be a nuisance.
There’s an immediate question of what kinds of animation we want to cultivate in the Elm community.
With that in mind, here are two types of animation that I’d love to emphasize and elm-animator should be very useful for both.
Continuous UI
A continuous UI minimizes context-shifting for a user and allows them to build a spatial model of your interface.
We’re generally used to pieces of UI popping in and out of existence, and pages that change drastically on click. Everytime something changes, it’s a context shift for your user.
We can use animation to make that experience continuous so our users can build a quick intuition about how our interfaces work.
Sarah Drasner has an excellent talk showing what a continuous UI interaction can look like.
There’s also a fairly basic page transition example - (Code) for this library that has the same principle.
Calm Enrichment
The second type is something I think of as calm enrichment.
The floating city on the Elm Japan Website (you’ll need to scroll down a little) is wonderful!
It doesn’t distract from what I’m trying to accomplish on the website, it simply sits there, calmly floating. It doesn’t take anything away from my budget of attention that I have when visiting the website. In fact it likely increases the amount of attention I’m willing to pay.
They used elm-playground (which I am likewise inspired by) to achieve the effect and convinced me to make this sort of thing easy in elm-animator.
The Successor to Elm Style Animation
Elm Style Animation had a scaling problem. 
What does that mean? Well, every animated element needed a Animation.State in your model.
This meant for more complex animations(~10 elements? is that even that complex?), there was a lot of boilerplate necessary to get things going.
elm-animator doesn’t have this problem. You could animate n elements for any given timeline. And the timeline is likely based on state you’re already storing in your model!
That, combined with the fact that elm-animator can generate CSS keyframes means I consider elm-animator to be elm-style-animation’s successor.
Next step, Elm UI
This release is about creating a solid animation engine for anyone to use, though my ultimate goal is to bring a nice story around animation directly to elm-ui.
So it’s likely that the next release of elm-ui will depend on this library directly.
Inspiration
I was inspired by these talks! Liz and Andrew both built some really cool stuff in Elm. My goal was to build something that would help them in their future endeavors.
-
Andrew MacMurry - Building Seeds: A Smartphone Game for the Browser @ Elm in the Spring
Andrew’s CSS keyframe sequence solution solved some real performance problems he was encountering. He convinced me that including CSS keyframe generation would be well worth the time. -
Liz Krane - Building a Music Learning Game with Elm, Web MIDI, and SVG Animation @ Elm Conf
Probably the reason I included support for sprite animation in the library was this talk.
- Thank you Ian and Tereza
