So, `Animation.speed` was made to handle the specific case of getting a 
reasonable default for rotating things.  It's not really intended to be 
used widely...but Im still open to hearing use cases :)

First, heres why `Animation.speed` is present in the library at all and why 
its only used as the default interpolation for rotation. 

Lets say I tell something to "Rotate 872 degrees" vs saying "Rotate 36 
degrees".  It's actually pretty reasonable to assume that it will have the 
same speed to go to each value.  However you can't achieve that result with 
duration + easing (where the duration for both of those rotations would be 
the same, making one ridiculously fast.)  You also can't use springs in 
this situation because it looks pretty weird.  The duration is just however 
long it takes to get to the target value at that speed.

Now that I've given you way too information on that subject:)  lets talk 
about what you are actually trying to do.

I'm assuming you're literally animating some number of drops per second?

The basic way to approach it would be to just using duration + easing

Something like

    [ Animation.loop
        [ Animation.toWith 
                (easing { ease = identity
                        , duration = 0.33 * second
                [ top (percent 100)
        , Animation.set 
                [ top (percent 0)

Though in real life the drops will always fall at the same speed, so we 
could have a `Animation.wait` step in there that varies.  So you could find 
what the duration is for a drop that feels the most natural and just vary 
the wait step to fill the spaces between.

Or, alternatively, don't worry about creating a looping animation.  Get a 
time subscription  and just worry about starting an animation every nth 

So, every time period, just run:

    [ Animation.set 
            [ top (percent 0)
            [ top (percent 100)
It'll only run into issues if you try to animate them too fast :)

Hopefully all this helps!

On Wednesday, September 21, 2016 at 5:34:31 PM UTC-4, Brian Marick wrote:
> > On Sep 21, 2016, at 4:19 PM, Brian Marick < 
> <javascript:>> wrote: 
> > 
> > This is working nicely for me, a CSS (and animation newbie). Naive 
> question: what is the relationship between `Animation.speed {perSecond : 
> Float}` and the duration of the animation (or the `animation-duration` 
> property)? 
> To put this into context: I need to produce an animation in support of 
> exercises on setting up IV drops. I need to implement phrases like “3 drops 
> per second”.

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 
For more options, visit

Reply via email to