From bottom to top, floating animation showcase

Square.elm

module Square exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Animation exposing (px, percent)
import Time exposing (second)
import Ease exposing (..)


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


type alias Model =
    { style1 : Animation.State
    , style2 : Animation.State
    }


init : ( Model, Cmd Msg )
init =
    ( { style1 =
            Animation.style [ Animation.top (percent 100) ]
                |> Animation.interrupt
                    [ Animation.loop
                        [ Animation.toWith (Animation.speed { perSecond = 15 })
                            [ Animation.top (percent -40) ]
                        , Animation.set [ Animation.top (percent 100) ]
                        ]
                    ]
      , style2 =
            Animation.style [ Animation.left (px 200) ]
                |> Animation.interrupt
                    [ Animation.loop
                        [ Animation.toWith (Animation.easing { duration = 2 * second, ease = inOutSine }) [ Animation.left (px 400) ]
                        , Animation.toWith (Animation.easing { duration = 2 * second, ease = inOutSine }) [ Animation.left (px 200) ]
                        ]
                    ]
      }
    , Cmd.none
    )


subscriptions : Model -> Sub Msg
subscriptions model =
    Animation.subscription Animate [ model.style1, model.style2 ]


type Msg
    = Animate Animation.Msg


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


view : Model -> Html Msg
view model =
    div
        (Animation.render model.style1
            ++ Animation.render model.style2
            ++ [ style
                    [ ( "position", "absolute" )
                    , ( "padding", "25px" )
                    , ( "width", "200px" )
                    , ( "height", "200px" )
                    , ( "background-color", "#268bd2" )
                    , ( "color", "white" )
                    ]
               ]
        )
        []