I was working on an animation which consisted of two steps, and noticed that the second step never got executed. It's probably easier to give a minimal example to explain:
module Main exposing (..)
import Animation exposing (..)
import Ease
import Html exposing (..)
import Html.Attributes
import Html.Events
main : Program Never Model Msg
main =
program
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
}
type alias Model =
{ style : Animation.State
}
type Msg
= Animate Animation.Msg
| StartAnimation
subscriptions : Model -> Sub Msg
subscriptions model =
Animation.subscription Animate [ model.style ]
init : ( Model, Cmd Msg )
init =
( { style =
Animation.style
[ Animation.opacity 1.0 ]
}
, Cmd.none
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Animate animMsg ->
( { model | style = Animation.update animMsg model.style }
, Cmd.none
)
StartAnimation ->
( { model
| style =
Animation.interrupt
[ Animation.toWith
(Animation.easing
{ duration = 600
, ease = Ease.outCubic
}
)
[ Animation.opacity 0.3 ]
, Animation.toWith
(Animation.easing
{ duration = 600
, ease = Ease.outCubic
}
)
[ Animation.opacity 1.0 ]
]
model.style
}
, Cmd.none
)
view : Model -> Html Msg
view model =
div []
[ button [ Html.Events.onClick StartAnimation ] [ text <| "Start animation" ]
, div
(Animation.render model.style
++ [ Html.Attributes.style
[ ( "width", "100px" )
, ( "height", "100px" )
, ( "background-color", "blue" )
]
]
)
[]
]
It's supposed to go from opacity 1 -> opacity 0.3 -> opacity 1, but it remains on opacity 0.3.
I was working on an animation which consisted of two steps, and noticed that the second step never got executed. It's probably easier to give a minimal example to explain:
It's supposed to go from opacity 1 -> opacity 0.3 -> opacity 1, but it remains on opacity 0.3.
I think the error is in this code: https://github.com/mdgriffith/elm-style-animation/blob/master/src/Animation/Model.elm#L1616-L1617
I made a local copy and changed that to
Then the animation does run to the end, but I'm not sure this is the best solution