Feedback on Animation Utils

Hi everyone!

This is very much a work in progress, but I thought it would be useful to get some feedback / temperature check on the idea and the api so far.

Some background

I’ve been implementing some animations at work and on a few personal projects, and I often find myself in this position:

  • My animations are so simple that maybe I could write a bit of CSS and get away with it
  • But as soon as they get a little bit more complex they become quite brittle and irritating to maintain
  • I’ll reach for the fantastic elm-animator and wire everything in
  • But then there’s an awful lot of wiring, and particularly when these animations don’t need powerful things like interruptions, it makes me think - is there a middle ground between the two approaches?

I’ve been putting together elm-simple-animation (working title) that uses a similar technique to elm-animator to generate CSS keyframes and a stylesheet under the hood and renders the animation on the page - but without any of the state machinery.

For Example:

animatedDot : Html msg
animatedDot =
    Animated.div expandFade [ class "dot" ] []

expandFade : Animation
expandFade =
        { duration = 2000
        , options = [ Animation.loop ]
        [ P.opacity 1, P.scale 1 ]
        [ P.opacity 0, P.scale 2 ]

Can give you something like:

2020-12-20 15.27.53


It would be great to hear some thoughts on these questions:

  • Would this be useful to anyone?
  • Does the API make sense?
  • Is this something that could live alongside elm-animator?

Here is the api doc preview (haven’t published the library yet) -
Repo is here -
Some live examples here -

Any thoughts or feedback would be much appreciated


It looks easy to use. I’d definitely consider using it. I have one question though: How do I make ease-in and ease-out animations? I saw only ease-in-out in the docs.

That’s good to hear! And yes good point, am going to add the standard CSS eases and perhaps the standard extras


This looks really cool @andrewMacmurray! Love the elm-ui helpers. Planning to try it out on some looping animations with elm-ui this week!

1 Like

I was adding some animations to a simple game I made for the family over the holidays, and wished for exactly this while wiring in elm-animator for simple fades. So yes, it is useful.

As for the API, a quick glance and it seems very clear what’s going on. I’ll definitely be trying this out and providing feedback when I next get time to play.

Thank you!

1 Like

That’s awesome! Just as an fyi, v1.0.0 is available here


I’ve just come back here to say how great it is, and that you should publish it, and you have already :+1:

I’m a big fan of Elm-UI, and have used (and like) Elm-Animator, but it’s great to be able to have something like this for simple anims that also supports Elm-UI.

It’s quick and easy to use, thank you.

1 Like

Hooray! Thanks, glad you like it :grinning_face_with_smiling_eyes:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.