mdgriffith/elm-animator/2.0.0

Animator.Value

You may want to animate a value manually, without generating any CSS.

This module is for you!

You'll need to track a Timeline in your model and update it using Browser.Events.onAnimationFrame.

color : Timeline state -> (state -> Color) -> Color
float : Timeline state -> (state -> Movement) -> Float
velocity : Timeline state -> (state -> Movement) -> Float

Units per second: if your values are pixels, this returns pixels per second.

Timeline state
-> (state -> Movement)
-> { position : Float
, velocity : Float
}

The interpolated position and velocity (in value units per second). Completed transitions hold their destination with zero velocity. Interrupted transitions contribute their position and velocity at the interruption time.

type alias Movement =
Move Float
to : Float -> Movement
xy :
Timeline state
-> ( state
-> { x : Movement
, y : Movement
}
)
-> { x : Float
, y : Float
}
xyz :
Timeline state
-> ( state
-> { x : Movement
, y : Movement
, z : Movement
}
)
-> { x : Float
, y : Float
, z : Float
}
withTransition : Transition -> Movement -> Movement