andrewMacmurray / elm-simple-animation / Simple.Animation.Animated

Render animations on the page

This module gives you animated Html divs out of the box, and some helpers to create animated versions of whatever UI library you're using.

Common Helpers

You can find examples of building many of the common helpers mentioned below: https://github.com/andrewMacmurray/elm-simple-animation/blob/main/examples/src/Utils/Animated.elm

Html Animations

div : Simple.Animation.Animation -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

Render an Animated div

import Html exposing (Html)
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated as Animated
import Simple.Animation.Property as P

dot : Html msg
dot =
    Animated.div expandFade [ class "dot" ] []

expandFade : Animation
expandFade =
    Animation.fromTo
        { duration = 2000
        , options = [ Animation.loop ]
        }
        [ P.opacity 1, P.scale 1 ]
        [ P.opacity 0, P.scale 2 ]

html : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> Simple.Animation.Animation -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

Create any animated Html node:

For example, Simple.Animation.Animated.div is defined like this:

div : Animation -> List (Html.Attribute msg) -> List (Html msg) -> Html msg
div =
    Simple.Animation.Animated.html Html.div

Hook Into SVG


type alias SvgOptions msg =
{ class : String -> Html.Attribute msg }

svg : SvgOptions msg -> (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> Simple.Animation.Animation -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

So you can use whatever version of elm/svg you like use the Simple.Animation.Animated.svg function along with Svg.Attributes.class to create animated Svg elements:

animatedSvg =
    Simple.Animation.Animated.svg
        { class = Svg.Attributes.class
        }

Then render an animation

dot : Svg msg
dot =
    Svg.svg []
        [ g expandFade [] [ svgDot ]
        ]

g : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
g =
    animatedSvg Svg.g

Hook Into Elm UI


type alias UiOptions element attribute msg =
{ behindContent : element -> attribute
, html : Html msg -> element
, htmlAttribute : Html.Attribute msg -> attribute 
}

ui : UiOptions element attribute msg -> (List attribute -> children -> element) -> Simple.Animation.Animation -> List attribute -> children -> element

Create animated elm-ui Elements

animatedUi =
    Simple.Animation.Animated.ui
        { behindContent = Element.behindContent
        , htmlAttribute = Element.htmlAttribute
        , html = Element.html
        }

Then render an animation

dot : Element msg
dot =
    el expandFade [] elmUiDot

el : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
el =
    animatedUi Element.el

Hook Into Elm CSS


type alias ElmCssOptions element attribute =
{ text : String -> element
, node : String -> List attribute -> List element -> element
, class : String -> attribute 
}

elmCss : ElmCssOptions element attribute -> (List attribute -> List element -> element) -> Simple.Animation.Animation -> List attribute -> List element -> element

Create animated elm-css Styled nodes

animatedCss =
    Simple.Animation.Animated.elmCss
        { text = Html.Styled.text
        , node = Html.Styled.node
        , class = Html.Styled.Attributes.class
        }

Then render an animation

dot : Html.Styled msg
dot =
    el expandFade [] elmCssDot

div : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
div =
    animatedCss Html.Styled.div

Custom Renderer


type alias ClassName =
String


type alias Stylesheet =
String

custom : (ClassName -> Stylesheet -> animated) -> Simple.Animation.Animation -> animated

When you want to completely customise how to render animations you can use the low level Simple.Animation.Animated.custom. This gives you access to the raw animation stylesheet and class name that will apply the animation.

For example, say you wanted to animate elm-community/typed-svg nodes - you could create animated versions like this:

g : Animation -> List (TypedSvg.Attribute msg) -> List (TypedSvg.Svg msg) -> TypedSvg.Svg msg
g =
    animatedTypedSvg TypedSvg.g

animatedTypedSvg node animation attributes children =
    Simple.Animation.Animated.custom
        (\className stylesheet ->
            node
                (TypedSvg.Attributes.class [ className ] :: attributes)
                (TypedSvg.style [] [ TypedSvg.text stylesheet ] :: children)
        )
        animation