elm-style-animation example

main.elm

module Main exposing (..)

import Animation exposing (px)
import Html exposing (Html, div, text)
import Html.App as App
import Html.Attributes exposing (style)


main =
    App.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


type alias Model =
    { style : Animation.State
    }


type Msg
    = Animate Animation.Msg


init : ( Model, Cmd Msg )
init =
    ( { style =
            Animation.queue
                [ Animation.to
                    [ Animation.left (px 300.0)
                    ]
                ]
            <|
                Animation.style
                    [ Animation.left (px 0.0) ]
      }
    , Cmd.none
    )


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


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Animate animMsg ->
            ( { model
                | style = Animation.update animMsg model.style
              }
            , Cmd.none
            )


view : Model -> Html Msg
view model =
    div
        (Animation.render model.style
            ++ [ style
                    [ ( "position", "absolute" )
                    , ( "border-style", "dotted" )
                    ]
               ]
        )
        [ text "This is being Animated!" ]