Feedback on Animation Utils

Request Feedback
1

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 =
    Animation.fromTo
        { 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

Questions

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) - https://elm-doc-preview.netlify.app/?repo=andrewmacmurray%2Felm-simple-animation
Repo is here - https://github.com/andrewMacmurray/elm-simple-animation
Some live examples here - https://elm-simple-animation-examples.surge.sh/

Any thoughts or feedback would be much appreciated

14 Likes
2

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.

3

That’s good to hear! And yes good point, am going to add the standard CSS eases and perhaps the standard extras https://easings.net/

2 Likes
4

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
5

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
6

That’s awesome! Just as an fyi, v1.0.0 is available here https://package.elm-lang.org/packages/andrewMacmurray/elm-simple-animation/latest/

3 Likes
7

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
8

Hooray! Thanks, glad you like it :grinning_face_with_smiling_eyes:

9

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