Bring animations to your Elm app!

Check out the talk that goes with the library, The Immutable Animator's Toolkit.

Join the #animations channel on the Elm Slack if you want to chat!

     import Animator as Anim
     import Html


     Anim.div
        (Anim.transition (Anim.ms 200)
            [ Anim.opacity <|
                if model.visible then
                    1
                else
                    0
            ]
        )
        []
        [ Html.text "👍" ]

Upgrading from 1.x? See the 2.0.0 release notes and upgrade guide.

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.

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.

The V2 examples demonstrate timeline-driven movement, springs, and loading states.

The second type is something I think of as calm enrichment.

The floating city on the Elm Japan Website —you will 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.

See Testing V2 for the review, Elm, and browser test commands and regression coverage.