The Style Animation library for Elm!

The Basics

To get started, there are a few things that need to happen.

Set an initial style in your model.

import Animation exposing (px)

init : Model
init =
    { style = 
        Animation.style 
            [ Animation.left (px 0.0)
            , Animation.opacity 1.0
            ]
    }

Subscribe to Animation's subscription. This will animate using AnimationFrame when something is running, and stop giving updates when there is no animation.

subscriptions : Model -> Sub Msg
subscriptions model =
    Animation.subscription [model.style] Animate

Set up an update Msg in your update function.

    Animate animMsg ->
        { model
            | animation = Animation.update animMsg model.style
        }
                

Render our animation at the necessary element in your view. Not all animated properties are style properties(such as the svg.d property and polygon.points property), so Animation.render actaully returns a list of Html.Attributes. Fortunately, you can add your own style because Html.Attributes.style stacks!

    div
        (Animation.render model.style
            ++ [ style
                    [ ( "position", "absolute" )
                    , ( "border-style", "dotted" )
                    ]
               ]
        )
        [ text "This is being Animated!" ]

Start an animation in your update statement.

case msgs of
    Show ->
        let 
            newStyle = 
                Animation.interrupt
                    [ Animation.to 
                        [ Animation.left (px 0.0)
                        , Animation.opacity 1.0
                        ]
                    ]
                    model.style
        in
            { model
                | style = newStyle
            }

Here's generally how we compose animations.

* Choose Animation.queue or Animation.interrupt, both of which take a list of steps and your animation model. * Steps can be * Animation.to - Animate to a target style * Animation.set - Set a animation to a style immediately. * Animation.wait (5 * second) - wait for some amount of time * Animation.repeat x [..list of steps to repeat] - Repeat a list of steps x times. * Animation.loop [..list of steps to repeat] - Loop a list of steps forever/until interrupted.

Examples

* Gears - Demo - Code * Menu - Demo - Code * Logo - Demo - Code * Showcase - Demo - Code