andrewMacmurray / elm-simple-animation / Simple.Animation

Build an Animation for rendering on the page.

Create an Animation


type alias Animation =
Internal.Animation.Animation

Animation to be rendered with Simple.Animation.Animated functions.


type alias Millis =
Internal.Unit.Millis

Time unit for all Animations.

fromTo : { duration : Millis, options : List Option } -> List Property -> List Property -> Animation

Create an animation with start and end properties:

import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P

fadeOut : Animation
fadeOut =
    Animation.fromTo
        { duration = 1000
        , options = []
        }
        [ P.opacity 1 ]
        [ P.opacity 0 ]

steps : { startAt : List Property, options : List Option } -> List Step -> Animation

Create an animation with multiple steps:

import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P

backAndForth : Animation
backAndForth =
    Animation.steps
        { startAt = [ P.x 0 ]
        , options = []
        }
        [ Animation.step 1000 [ P.x 100 ]
        , Animation.step 1000 [ P.x 0 ]
        ]

empty : Animation

Create an Empty Animation - Useful when you want to conditionally animate something.

fadeIf : Bool -> Animation
fadeIf shouldFade =
    if shouldFade then
        Animation.fromTo
            { duration = 1000
            , options = []
            }
            [ P.opacity 0 ]
            [ P.opacity 1 ]

    else
        Animation.empty

Animation.empty is equivalent to an animation with 0 duration.

Animation Steps

Build up a multi step animation


type Step

step : Millis -> List Property -> Step

Animate to a list of properties for a given number of milliseconds:

Animation.step 1000 [ P.opacity 1 ]

set : List Property -> Step

Set a list of properties immediately in an animation (This is equivalent to step 1):

Animation.set [ P.opacity 0 ]

wait : Millis -> Step

Wait for a given number of milliseconds before animating the next properties:

Animation.wait 1000

waitTillComplete : Animation -> Step

Wait for another animation to complete before animating the next properties.

This animation will wait for 1500 milliseconds before animating to the next step:

import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P

finishAfterFadeOut : Animation
finishAfterFadeOut =
    Animation.steps
        { startAt = [ P.x 0 ]
        , options = []
        }
        [ Animation.step 500 [ P.x 20 ]
        , Animation.waitTillComplete fadeOut
        , Animation.step 500 [ P.x 60 ]
        ]

fadeOut : Animation
fadeOut =
    Animation.fromTo
        { duration = 2000
        , options = []
        }
        [ P.opacity 1 ]
        [ P.opacity 2 ]

Animation Options

Customise the feel and behaviour of an animation.


type alias Option =
Internal.Animation.Option

loop : Option

Repeat an animation forever

count : Basics.Int -> Option

Play an animation a given number of times

delay : Millis -> Option

Delay the start of an animation (repeats like loop or count are not affected by this)

reverse : Option

Play animation in reverse

yoyo : Option

When animation completes, play it in reverse

Standard Eases

Standard CSS eases.

linear : Option

easeIn : Option

easeOut : Option

easeInOut : Option

cubic : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Option

Extended Eases

See what these eases look and feel like: https://easings.net

easeInSine : Option

easeOutSine : Option

easeInOutSine : Option

easeInQuad : Option

easeOutQuad : Option

easeInOutQuad : Option

easeInCubic : Option

easeOutCubic : Option

easeInOutCubic : Option

easeInQuart : Option

easeOutQuart : Option

easeInOutQuart : Option

easeInQuint : Option

easeOutQuint : Option

easeInOutQuint : Option

easeInExpo : Option

easeOutExpo : Option

easeInOutExpo : Option

easeInCirc : Option

easeOutCirc : Option

easeInOutCirc : Option

easeInBack : Option

easeOutBack : Option

easeInOutBack : Option

Animation Duration

duration : Animation -> Millis

Get the duration of an animation.