This code will eventually be released as a major version to elm-style-animation.

The main purpose of this rewrite was to change the API to use a list based api vs the pipes based api that was used previously. I also wanted to take the time to add some polish.

I've filed a number of issues on this repo on design points that I would love feedback on. Please reply to them if you have any thoughts or submit an issue if you've thought of something I've missed!

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.

• Gears - Demo - Code
• Menu - Demo - Code
• Logo - Demo - Code
• Showcase - Demo - Code