elm-animation finally out!

177 views
Skip to first unread message

Max Goldstein

unread,
Aug 31, 2015, 5:23:41 PM8/31/15
to Elm Discuss
I've finally gotten around to chasing down the last pair of bugs and releasing elm-animation!

I appreciate the other animation libraries out there, especially Dan's, but let me advertise for a minute and tell you why I think my library is best.

Rather than signals or tasks, animations are just (opaque) records and pure functions that operate on them. They're run from a single running clock, which you maintain - the library doesn't try to architect your application for you. Because the clock is under your control, you can slow down animations, peek into the future or past, or pause time entirely. You can inspect animations, equate them, determine how long they've been running, their velocity, or the time elapsed. And you can undo or retarget animations to smoothly move towards new values.

From an API standpoint, every function in the library (except retarget) takes no more than two arguments. This encourages a readable pipeline style, rather than "what does that parameter do?". The docs walk you through everything you need to know to use the library.

import Animation exposing (..)
import Time exposing (second)

myAnim = animation 0 |> from 100 |> to 300 |> duration (4*second) |> delay (1*second)
List.map (\t -> animate (t*second) myAnim) [0..6]
-- [100, 100, 129.29, 200, 270.71, 300, 300]

I'm very satisfied with this release. However, if there's a feature you'd like to see, please let me know.

Sean Clark Hess

unread,
Aug 31, 2015, 6:12:27 PM8/31/15
to elm-d...@googlegroups.com
Looks cool! Could you help me figure out how to fit it into the elm-architecture? Does this tie in to elm-effects, replace it, or something else? 

Could it be used to animate changes in list position? Something like this: http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Max Goldstein

unread,
Aug 31, 2015, 6:32:01 PM8/31/15
to Elm Discuss
There are no other than the running clock and the view. In your model, keep an animation for every property in your model you want to animate, and use that to render the view. I'll try to get an example posted soon.

Pete Vilter

unread,
Sep 1, 2015, 1:23:46 AM9/1/15
to Elm Discuss
Looks cool! Would love to see an example using it with Elm-Effects — maybe something as simple as changing the Counter example so the number pulses (in size or color) when it changes.

Sean Hess

unread,
Sep 2, 2015, 10:32:23 AM9/2/15
to Elm Discuss
This is a little overcomplicated, but here's an example using the library with elm effects. From a beginner's perspective, it's an improvement on the elm-architecture example with the animation in that you don't have to track elapsed time, just the current time. 

You still have to keep track of when your effect starts and ends so there is room for another library.


Here's what it looks like in action:

Max Goldstein

unread,
Sep 2, 2015, 11:59:24 AM9/2/15
to Elm Discuss
The gif is a 403.

I'm not sure why you're wrapping Animation with Transition, unless you're worried about the performance of unnecessary animations (which seems premature to me). You can create a static animation that is always a certain value, and it's safe to animate animations after they're done, since they stay at the final value.

Noah Hall

unread,
Sep 2, 2015, 12:45:20 PM9/2/15
to elm-d...@googlegroups.com
Very reminiscent of the Tidal[0] API, makes me wonder if an animation
equivalent or accompaniment to Tidal would be possible. An interesting
project might be to recreate Tidal in Elm, then tie it to your
library. Hmm..

[0] - https://github.com/tidalcycles/Tidal/blob/master/doc/tidal.md#transforming-patterns

Sean Clark Hess

unread,
Sep 2, 2015, 2:29:00 PM9/2/15
to elm-d...@googlegroups.com
Not sure what's up with the gif. I've attached it to this message let's see if it comes through: 

Inline image 1
I think you're saying that it's redundant to track the value right? Just call animate with the animation any time I want? 

It's the individual list items that need to animate, so for them to call animate I would need to pass them the current time. Is that what you'd recommend instead?


On Wed, Sep 2, 2015 at 9:59 AM, Max Goldstein <maxgol...@gmail.com> wrote:
The gif is a 403.

I'm not sure why you're wrapping Animation with Transition, unless you're worried about the performance of unnecessary animations (which seems premature to me). You can create a static animation that is always a certain value, and it's safe to animate animations after they're done, since they stay at the final value.

--

Max Goldstein

unread,
Sep 2, 2015, 6:51:11 PM9/2/15
to Elm Discuss
Gif looks good! I you know that an animation is static, you can animate it at any time you want. When it's actually animating, you need to pass the current time. So I'd recommend always passing the current time and reducing the cases.

Sean Clark Hess

unread,
Sep 2, 2015, 7:04:35 PM9/2/15
to elm-d...@googlegroups.com
No it's not static. So you're recommending throwing current time into my model and passing it down to my subviews so they can call animate right?

Thanks. 


On Wednesday, September 2, 2015, Max Goldstein <maxgol...@gmail.com> wrote:
Gif looks good! I you know that an animation is static, you can animate it at any time you want. When it's actually animating, you need to pass the current time. So I'd recommend always passing the current time and reducing the cases.

--

Max Goldstein

unread,
Sep 2, 2015, 10:08:02 PM9/2/15
to Elm Discuss
Yes, that's what you should do. Hopefully that works for you.

You can also look at some of the examples, although none of them use elm-html.
Reply all
Reply to author
Forward
0 new messages