Skip to content

Multi step animations

Brian Marick edited this page Aug 31, 2017 · 1 revision

Full source

Only Droplet.elm needs to change.

Add a drop-growing step before the falling step:

falls : AnimationModel -> AnimationModel
falls = 
  Animation.interrupt
    [ Animation.loop
        [ Animation.set initStyles
        , Animation.toWith growing grownStyles
        , Animation.toWith falling fallenStyles
        ]
    ]

Growing a droplet is much like draining fluid:

grownStyles : List Animation.Property
grownStyles =
  [ Animation.height (px 20) ]

Since the droplet grows down instead of up, we only need to adjust the y value.

Clone this wiki locally