Holds the Transition engine state.

Keep this in your model.

type alias Model =
    { animState : Transition.AnimState }

The name of the animation group you want to target.

Type alias for the base AnimBuilder type.

Builder type for Transition-only builders.

Use this in type annotations when a builder function should only work with this engine.

📖 See Engine Capabilities for patterns and examples.

Initialize the engine state with a list of property initializers.

import Anim.Engine.Transition as Transition
import Anim.Property.Opacity as Opacity


Transition.init
    [ Opacity.init "animGroupName" 0.5
    , ... -- other property initializers
    ]

Select the animation group that subsequent property builders will target.

Transition.for "animGroupName"
    >> Opacity.begin
    >> Opacity.to 0.2
    >> Opacity.end

Trigger animations.

import Anim.Engine.Transition as Transition


{ model
    | animState = Transition.animate model.animState entryAnim
}

Change the targeted properties instantly to their new values. If currently animating, stop.

This is a convenience function for immediately snapping properties or axes to new values without needing to construct a full animation builder with animate.

Just target the properties or axes you want to change. Any other properties or axes on the group will snap to their targeted end values if mid-flight.

import Anim.Engine.Transition as Transition
import Anim.Property.Translate as Translate


{ model
    | animState =
        Transition.retarget model.animState <|
            Transition.for "animGroupName"
                >> Translate.begin
                >> Translate.toY 0
                >> Translate.end
}

The ID of the element that owns the event listener.

The ID of the element that started the event.

This will be different from CurrentTargetId if the event bubbled from a child element.

CSS transition lifecycle events.

Message type used with update.

import Anim.Engine.Transition as Transition


type Msg
    = TransitionMsg Transition.AnimMsg
    | ...

Handle messages from this engine.

Returns the updated state and an event for this message, if one should be surfaced.

import Anim.Engine.Transition as Transition


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        TransitionMsg animMsg ->
            let
                ( animState, maybeEvent ) =
                    Transition.update animMsg model.animState


                nextModel =
                    { model | animState = animState }
            in
            case maybeEvent of
                Just event ->
                    handleAnimationEvent event nextModel


                Nothing ->
                    ( nextModel, Cmd.none )


handleAnimationEvent : Transition.AnimEvent -> Model -> ( Model, Cmd Msg )
handleAnimationEvent event model =
    case event of
        ...

Apply the animation attributes to your element.

import Anim.Engine.Transition as Transition
import Html exposing (div, text)


div
    (Transition.attributes "animGroupName" animState)
    [ text "Animating element" ]

Receive transition lifecycle events.

Add events to your element with a message constructor that wraps AnimMsg.

import Anim.Engine.Transition as Transition
import Html exposing (div, text)


type Msg
    = TransitionMsg Transition.AnimMsg


div
    (Transition.attributes "animGroupName" animState
        ++ Transition.events "animGroupName" TransitionMsg
    )
    [ text "Animating element" ]

The same as events but with propagation stopped.

import Anim.Engine.Transition as Transition
import Html exposing (div, text)


div
    (Transition.attributes "animGroupName" model.animState
        ++ Transition.eventsStopPropagation "animGroupName" TransitionMsg
    )
    [ text "Animated element" ]

Set the default length unit for all length-bearing properties.

responsivePanelMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsivePanelMotion =
    cssUnit Unit.Vw
        >> slidePanelIn
        >> growPanel

Set the default length unit for the X axis.

responsiveDrawerMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveDrawerMotion =
    cssUnitX Unit.Vw
        >> slidePanelIn
        >> growPanel

Set the default length unit for the Y axis.

responsiveSheetMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveSheetMotion =
    cssUnitY Unit.Vh
        >> slidePanelIn
        >> growPanel

Set the default length unit for the Z axis.

layeredSceneMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
layeredSceneMotion =
    cssUnitZ Unit.Px
        >> slidePanelIn
        >> growPanel

Set the default length unit used for width values in Transition animations.

responsiveCardWidth : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveCardWidth =
    cssUnitWidth Unit.Vw
        >> slidePanelIn
        >> growPanel

Set the default length unit used for height values in Transition animations.

responsivePanelHeight : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsivePanelHeight =
    cssUnitHeight Unit.Vh
        >> slidePanelIn
        >> growPanel

Set the global delay for all animations in this builder.

introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
    delay 500
        >> fadeInHeader
        >> slideInSidebar
        >> fadeInContent

Set the global duration for all animations in this builder.

introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
    duration 500
        >> fadeInHeader
        >> slideInSidebar
        >> fadeInContent

Set the global speed for all animations in this builder.

introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
    speed 300
        >> slideDownHeader
        >> slideInSidebar
        >> slideUpContent

Set the global easing function.

heroEntrance : AnimBuilder { eng | withEasing : () } -> AnimBuilder { eng | withEasing : () }
heroEntrance =
    easing EaseInOut
        >> fadeInHeroTitle
        >> slideInHeroArtwork
        >> revealPrimaryCta

Stop a running animation by instantly jumping to its end state.

import Anim.Engine.Transition as Transition


Transition.stop "animGroup" model.animState

Reset an animation by instantly jumping back to its start state.

import Anim.Engine.Transition as Transition


Transition.reset "animGroup" model.animState

Add a discrete CSS property for entry animations.

The value is applied as an inline style from the first frame and held throughout the animation. Use this when an element is appearing (e.g., going from display: none to display: block).

This function is a precedence function, so it can operate as a global setting for all groups in the builder chain, or you can set it on a per-group basis which overrides any global setting for that group.

For entry animations, pair this with startingStyleNode so the browser knows what values to transition from.

import Anim.Engine.Transition as Transition
import Anim.Property.Opacity as Opacity


Transition.animate model.animState <|
    Transition.discreteEntry "display" "block"
        >> Transition.for "box"
        >> Opacity.begin
        >> Opacity.to 1
        >> Opacity.end

Generate a <style> node containing @starting-style rules for all animated elements.

When an element enters the DOM (or changes from display: none), the browser needs to know what values to animate FROM. Without @starting-style, the browser skips the transition.

import Anim.Engine.Transition as Transition
import Html exposing (div, text)


view model =
    div []
        [ Transition.startingStyleNode model.animState
        , div (Transition.attributes "fadeIn" model.animState)
            [ text "I fade in!" ]
        ]

Generate @starting-style rules for a specific animation group.

import Anim.Engine.Transition as Transition
import Html exposing (div, text)


view model =
    div []
        [ Transition.startingStyleNodeFor "fadeIn" model.animState
        , div (Transition.attributes "fadeIn" model.animState)
            [ text "I fade in!" ]
        ]

Add a discrete CSS property for exit animations.

Exit animations need to hold their initial state until the very end of the animation, at which point they flip to the final state. Therefore you need to set both entry and exit values for the property.

This function is a precedence function, so it can operate as a global setting for all groups in the builder chain, or you can set it on a per-group basis which overrides any global setting for that group.

Use when an element is disappearing (e.g., going from display: block to display: none).

import Anim.Engine.Transition as Transition
import Anim.Property.Opacity as Opacity


Transition.animate model.animState <|
    Transition.discreteExit "display" "block" "none"
        >> Transition.for "box"
        >> Opacity.begin
        >> Opacity.to 0
        >> Opacity.end

Check if any animations are currently running.

Returns Nothing if there are no animations.

Check if a specific animation group is currently running.

Returns Nothing if there are no animations for the group.

Check if all animations are complete.

Returns Nothing if there are no animations.

Check if a specific animation group has completed.

Returns Nothing if there are no animations for the group.

Check if a specific animation group was cancelled.

Returns Nothing if there are no animations for the group.

Get the end value of a custom property animation.

The second argument is the CSS property name.

Returns Nothing if the element has no animation for the given custom property.

Get the end value of a custom color property animation.

The second argument is the CSS property name.

Returns Nothing if the element has no animation for the given custom color property.

Get the end opacity of an element being animated.

Returns Nothing if the element has no opacity animation.

Get the end perspective origin of an element being animated.

Returns Nothing if the element has no perspective origin animation.

Get the end rotation of an element being animated.

Returns Nothing if the element has no rotate animation.

Get the end scale of an element being animated.

Returns Nothing if the element has no scale animation.

Get the end size of an element being animated.

Returns Nothing if the element has no size animation.

Get the end skew of an element being animated.

Returns Nothing if the element has no skew animation.

Get the end translate of an element being animated.

Returns Nothing if the element has no translate animation.