Skip to content

Instantly share code, notes, and snippets.

@Natim Natim/Square.elm

Last active Jul 25, 2018
Embed
What would you like to do?
From bottom to top, floating animation showcase
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" )
]
]
)
[]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.