Enable parallel playing of steps on the same animation

[raffomania]

trafficstars

This makes it easier to re-use and combine existing step specifications. Imagine a flicker animation and a wiggle animation, playing independently (maybe also looping).

I'm not sure if interrupt is the right constructor for this as its description says

Interrupt any running animations with the following animation.

Maybe a new function like Animation.parallel, Animation.also or Animation.and might work?

[mdgriffith]

Thanks for opening the issue!

I took a peek at what would be involved to implement this and it requires some subtle changes to how the animations are run. So, I'm thinking this is going to be a part of the next major release, it's not going to happen immediately.

As far as api, I think probably the best thing is to just update the description of interrupt to be more precise, that it will interrupt any running animation on a per property basis. For interrupting many you can just use pipeline syntax.

newAnimation =
      model.animation
          |> Animation.interrupt anim1
          |> Animation.interrupt anim2

[Natim]

I was looking for the exact same thing and I ended up implementing it like that:

https://ellie-app.com/SbK5377Vyra1

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
    )

# ...

view : Model -> Html Msg
view model =
    div
        (Animation.render model.style1 ++ Animation.render model.style2)
        []

Although I was looking to implement it like that:

    Animation.loop
        [ Animation.parallel
            [ [ Animation.toWith (Animation.speed { perSecond = 15 }) [ Animation.top (percent -40) ]
              , Animation.set [ Animation.top (percent 100) ]
              ]
            , [ 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) ]
              ]
            ]
        ]

[LearningNerd]

Just upvoting this :) Also it never occurred to me to use multiple interrupts that way. @Natim, thank you for the example! I think this would be great to add to the examples in the repo so others can easily see how to do animations in parallel.