Confidenceman02 / elm-animate-height / AnimateHeight

Animate the height of your content.

Set up


type Msg


type Config msg


type State


type Identifier


type Transition
    = TransitionStart Basics.Float
    | TransitionEnd Basics.Float

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

init : Identifier -> State

Set up an initial state in your init function.

type alias Model =
    State

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

subscriptions : State -> Platform.Sub.Sub Msg

The AnimateHeight subscriptions.

type Model
    = State

type Msg
    = AnimatetMsg AnimateHeight.Msg

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

update : Msg -> State -> ( Maybe Transition, State, Platform.Cmd.Cmd Msg )

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 )

auto : Internal.HeightVariant

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
            )

fixed : Basics.Float -> Internal.HeightVariant

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
            )

fixedAtAuto : Internal.HeightVariant

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
            )

cubicBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Config msg -> Config msg

Cubic bezier timing

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

ease : Config msg -> Config msg

Ease timing

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

easeIn : Config msg -> Config msg

Ease-in timing

container
    (make AnimateHeight
        |> easeIn
    )

easeInOut : Config msg -> Config msg

Ease-in-out timing

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

easeOut : Config msg -> Config msg

Ease-out timing

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

container : Config msg -> Html msg

The container that wraps your view

The example shows a container with nothing in it.

yourView : Html Msg
yourView =
    container (make AnimateHeight)

instant : Config msg -> Config msg

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

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

immediate : Config msg -> Config msg

Animation duration of 200ms

container (make AnimateHeight |> immediate)

rapid : Config msg -> Config msg

Animation duration of 250ms

container (make AnimateHeight |> rapid)

fast : Config msg -> Config msg

Animation duration of 300ms

container (make AnimateHeight |> fast)

height : Internal.HeightVariant -> State -> State

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 )

heightAt : Internal.HeightVariant -> State -> State

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

getViewport : State -> Platform.Task Browser.Dom.Error Browser.Dom.Viewport

A task for the Viewport information of the container.

getViewport state => Task Error Viewport

identifier : String -> Identifier

The unique id of the container

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

linear : Config msg -> Config msg

Linear timing

container
    (make AnimateHeight
        |> linear
    )

make : (Msg -> msg) -> Config msg

A default Config

Argument is a msg that handles Msg's

yourView : Html Msg
yourView =
    container (make AnimateMsg)

animateOpacity : Basics.Bool -> Config msg -> Config msg

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

container
    (make AnimateHeight
        |> animateOpacity True
    )

customTiming : Basics.Float -> Config msg -> Config msg

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

custom -333 => 333

container (make |> customTiming 333)

content : List (Html msg) -> Config msg -> Config msg

The content the container will animate.

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

state : State -> Config msg -> Config msg

Sets the State value

type Model
    = State

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