The subscriptions AnimateHeight uses to function.

    type Msg =
        AnimateHeightMsg AnimateHeight.Msg


    subscriptions =
        Sub.map AnimateHeightMsg <| AnimateHeight.subscription animState

The container view that wraps your view.

    someCoolView =
        text "This is pretty cool!"


    view =
        container (default
            |> content someCoolView
        )

AnimationFrame calculates the height of the container per animation frame. By doing this we are ensuring that all calculations are resolved before the browser refresh operations. The animation if fully managed by us, no magic!

    init =
        initialState (containerUniqueId "123") default
            |> animationFrame

Transition avoids view updates and leverages css transitions to manage the animation.

    init =
        initialState (containerUniqueId "123") default
            |> transition

Use as an initial state for your AnimateHeight container.

It's important to ensure the unique id argument is in fact unique to avoid weird behaviour. Internally we add some extra characters to your id to help you out.

    init =
        initialState (containerUniqueId "123")

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

    init =
        initialState (containerUniqueId "123")
            |> instant

Animation duration of 200ms

    init =
        initialState (containerUniqueId "123")
            |> immediate

Animation duration of 250ms

    init =
        initialState (containerUniqueId "123")
            |> rapid

Animation duration of 300ms

    init =
        initialState (containerUniqueId "123")
            |> fast

Set a custom duration.

Negative values will be converted to their positive equivalent.

    custom -200 => 200


    init =
        initialState (containerUniqueId "123")
            |> custom 1000

Render your view.

    coolView =
        text "A cool view!"


    view =
       container (default
            |> content coolView
       )

Defines the behaviour of the overflow property.

You may have an element, such as a dropdown menu, that dynamically protrudes the container bondaries and needs to be visible.

    coolView =
        text "A cool view!"


    view =
       container (default
            |> content coolView
            |> overflow VisibleWhenAtContentHeight

By default the overflow is set to Hidden.

A starting configuration.

    view =
        container default

For when you want to start the container off at a its content height by default and not trigger an animation.

One use case could be when a page loads and you want all your AnimateHeight containers to show their content by default.

You can use setAtContentHeight in init.

init =
    initialState (uniqueContainerId "id")
        |> setAtContentHeight

The container will snap to a height subsequent to its changing content.

All that is happening internally is that the height value of the container is being set to auto when the container is at its content height.

    init =
        initialState (uniqueContainerId "id")
            |> snapToContent True

The working state for your container.

    view model =
        container (default
            |> state model.containerState
        )

AnimateHeight queries this id to find out height information.

If there are multiple containers then it is important that this ID be unique.

    init =
       { container1 = initialState <| uniqueContainerId "111"
       , container2 = initialState <| uniqueContainerId "222"
       }

Animate a container to its content height.

    update msg =
        case msg of
            ToggleContainer ->
                toContentHeight animState

You might want to use isContentHeight to toggle between animating toContentHeight and toMinHeight.

    update msg =
        case msg of
            ToggleContainer ->
                if (isContentHeight animState) then
                    toMinHeight animState
                else
                    toContentHeight animState

Animate a container to its minimum height.

    update msg =
        case msg of
            ToggleContainer ->
                toMinHeight animState

You might want to use isContentHeight to toggle between animating toMinHeight and toContentHeight.

    update msg =
        case msg of
            ToggleContainer ->
                if (isContentHeight animState) then
                    toMinHeight animState
                else
                    toContentHeight animState

By default the container height will be given a fixed value when it is at content hight. In this scenario, content that is added/removed will not adjust the containers height. See snapToContent for another option.

When your view content changes you can recalculate the container height.

This function makes the most sense to use when the container is already at content hight.

update : msg -> model -> ( model, Cmd msg )
update msg model =
    case msg of
        ContentAdded ->
            newState =
                if isContentHeight model.animateHeightState then
                    recalculate model.animateHeightState
                else
                    model.animateHeightState

Determine if a container is at its content height.

Useful for when you need to toggle a container to its content height or its min height.

    update msg =
        case msg of
            ToggleContainer ->
                if (isContentHight animState) then
                    toMinHeight animState
                else
                    toContentHeight animState

Update AnimateHeight container.

    type Msg =
        AnimateHeightMsg AnimateHeight.Msg


    update =
        case msg of
            AnimateHeightMsg animMsg ->
                AnimateHeight.update animMsg animState