Render

Rendering an animation with Elm Motion is very simple; it does not pollute your view, or require you to change anything about it, and is probably the simplest part of the library to use.

All you need is a single, drop-in function; the attributes function, which is exposed by every animation Engine. Simply add attributes to your view and you're done.

Using attributes

The attributes function generates HTML attributes for your element.

View Source Code

TransitionKeyframeSubWAAPIScrollTimelineViewTimeline

div 
    (Transition.attributes "boxAnim" model.animState) 
    [ text "I animate!" ]

div 
    (Keyframe.attributes "boxAnim" model.animState) 
    [ text "I animate!" ]

div 
    (Sub.attributes "boxAnim" model.animState) 
    [ text "I animate!" ]

div 
    (WAAPI.attributes "boxAnim" model.animState) 
    [ text "I animate!" ]

div
    (ScrollTimeline.attributes "boxAnim")
    [ text "I animate with scroll position!" ]

div
    (ViewTimeline.attributes "boxAnim")
    [ text "I animate when entering the viewport!" ]

The first argument is the animation group name - this connects your animation configurations to your view element.

Exactly what attributes returns depends on the Engine being used, the animation configurations for the group, and the current state of the animations.

📖 See Animation Group Names for more on defining groups when building animations.

Engine-Specific Requirements

While the attributes pattern is consistent across all engines, the Keyframe Engine has just one additional requirement.

Keyframe animations require a <style> node in the DOM containing the generated @keyframes rules:

View Source Code

view model =
    div []
        [ Keyframe.styleNode model.animState  -- Required!
        , div
            (Keyframe.attributes "boxAnim" model.animState)
            [ text "I animate!" ]
        ]

styleNode produces all the @keyframes rules for all animations in animState.

For a more targeted style node, use styleNodeFor animGroup which only applies the keyframes for that animation group. You can add multiple styleNodeFors to your DOM if so required.

view model =
    div []
        [ Keyframe.styleNodeFor "headerAnim" model.animState 
        , Keyframe.styleNodeFor "sidebarAnim" model.animState
        , div
            (Keyframe.attributes "headerAnim" model.animState)
            [ text "I am a header!" ]
        , div
            (Keyframe.attributes "sidebarAnim" model.animState)
            [ text "I am a sidebar!" ]
        ]

A Place at the Top

The @keyframes <style> node should be placed in your view at a stable top level.

If any @keyframes rules are inside a part of the DOM that gets re-rendered (a conditional branch, a list, etc.), Elm's virtual DOM diff may remove and re-add them - and when the browser sees "new" @keyframes rules, it restarts any animations using them - so be mindful where you put them and, unless you have a real need, place them as high up your DOM tree as you can.

Next Steps

Now that your view is setup ready to render your animations, the next step is triggering them.

Trigger →