# Feedback on Animation Utils

**URL:** <https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654>\
**Category:** Request Feedback\
**Created:** [December 20, 2020, 3:35pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654 "2020-12-20T15:35:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [December 20, 2020, 3:35pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/1 "2020-12-20T15:35:24Z")

</div>

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:

```elm
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](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/e/e0cc696d2b443390d5b1ba0e736dbbb1087d3f0b.gif)

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

Any thoughts or feedback would be much appreciated

---

<div class="post-metadata">

**Author:** ![mauro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mauro/32/3631_2.png) [@mauro](https://discourse.elm-lang.org/u/mauro)\
**Post date:** [December 20, 2020, 4:46pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/2 "2020-12-20T16:46:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [December 20, 2020, 5:34pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/3 "2020-12-20T17:34:32Z")

</div>

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/](https://easings.net/)

---

<div class="post-metadata">

**Author:** ![supermario](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/supermario/32/92_2.png) [@supermario](https://discourse.elm-lang.org/u/supermario)\
**Post date:** [December 28, 2020, 5:35pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/4 "2020-12-28T17:35:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Brendan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/brendan/32/5118_2.png) [@Brendan](https://discourse.elm-lang.org/u/Brendan)\
**Post date:** [January 5, 2021, 10:31pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/5 "2021-01-05T22:31:36Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [January 6, 2021, 10:56am UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/6 "2021-01-06T10:56:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [January 6, 2021, 2:18pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/7 "2021-01-06T14:18:39Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [January 6, 2021, 3:01pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/8 "2021-01-06T15:01:46Z")

</div>

Hooray! Thanks, glad you like it 😄

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [January 16, 2021, 3:01pm UTC](https://discourse.elm-lang.org/t/feedback-on-animation-utils/6654/9 "2021-01-16T15:01:51Z")

</div>

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