Transitions that are dispatched in sync with the animation lifecycle.

TransitionStart - Dispatched when an animation starts.

TransitionEnd - Dispatched when an animation ends.

The Float value is the target pixel height at which the animation will end.

TransitionStart 200 -> The animation has started and will end at 200px

TransitionEnd 200 -> The animation has ended at the height of 200px

Set up an initial state in your init function.

type alias Model =
    State


yourInit : Model
yourInit =
    init (identifier "unique-id")

The AnimateHeight subscriptions.

type Model
    = State


type Msg
    = AnimatetMsg AnimateHeight.Msg


yourSubs : Model -> Sub Msg
yourSubs model =
    Sub.map AnimateMsg <|
        subscriptions model

Add a branch in your update to handle the AnimateHeight Msg's.

type Model
    = State


yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
    case msg of
        AnimateMsg animMsg ->
            let
                ( transition, newState, cmds ) =
                    update animMsg model
            in
            ( newState, Cmd.map AnimateMsg cmds )

Will transition to the height of the content.

When the container reaches the content height it will set the height to auto.

type Model
    = State


update : msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        SeeContent ->
            let
                state =
                    height auto model
            in
            ( state
            , Cmd.none
            )

Will transition to the height you set.

Values translate to px values. e.g. 200 -> 200px

type Model
    = State


update : msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        SeeContent ->
            let
                state =
                    height (fixed 200)
            in
            ( state
            , Cmd.none
            )

Will transition to the fixed height of the container.

This is handy if you want to animate the height of a fixed container when adding or removing content.

type Model
    = State


update : msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        ContentRemoved ->
            let
                state =
                    height fixedAtAuto
            in
            ( state
            , Cmd.none
            )

Cubic bezier timing

yourView : Model -> Html Msg
yourView model =
    container
        (make AnimateHeight
            |> cubicBezier 0.1 0.7 1 0.1
        )

Ease timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> ease
        )

Ease-in timing

container
    (make AnimateHeight
        |> easeIn
    )

Ease-in-out timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> easeInOut
        )

Ease-out timing

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> easeOut
        )

The container that wraps your view

The example shows a container with nothing in it.

yourView : Html Msg
yourView =
    container (make AnimateHeight)

This is like not having an animation at all. Duration maps to 0

yourView : Html msg
yourView =
    container
        (make AnimateHeight
            |> instant
        )

Animation duration of 200ms

container (make AnimateHeight |> immediate)

Animation duration of 250ms

container (make AnimateHeight |> rapid)

Animation duration of 300ms

container (make AnimateHeight |> fast)

Set the height of the container to animate to.

This will produce animation events. Checkout Transition to find out how transition events work.

yourUpdate : Msg -> Model -> ( Model, Cmd Msg )
yourUpdate msg model =
    case msg of
        ShowTheContent ->
            let
                state =
                    height auto model
            in
            ( state, Cmd.none )

Set the height of the container.

This will not animate or produce animation events. Useful for when you want to set the starting height of the container without animating to it..

yourInit : Model
yourInit =
    init (identifier "unique-id")
        |> heightAt auto

The unique id of the container

yourInit : Model
yourInit =
    init (identifier "some-unique-id")

Linear timing

container
    (make AnimateHeight
        |> linear
    )

A default Config

Argument is a msg that handles Msg's

yourView : Html Msg
yourView =
    container (make AnimateMsg)

If set to True content will fade-in/fade-out while height is animated.

container
    (make AnimateHeight
        |> animateOpacity True
    )

Set a custom duration. Negative values will be converted to their positive equivalent.

custom -333 => 333

container (make |> customTiming 333)

The content the container will animate.

yourView : Html Msg
yourView =
    container
        (make AnimateHeight
            |> content [-- your content]
        )

Sets the State value

type Model
    = State


yourView : Model -> Html Msg
yourView model =
    container
        (make AnimateHeight
            |> state model
        )