Render an Animated div

import Html exposing (Html)
import Simple.Animated as Animated
import Simple.Animation as Animation exposing (Animation)
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 ]

Create any animated Html node:

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

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

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

animatedSvg =
    Simple.Animated.node 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

Create animated elm-ui Elements

animatedUi =
    Simple.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

When you want to completely customise how to render animations you can use the low level Simple.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.Animated.custom
        (\className stylesheet ->
            node
                (TypedSvg.Attributes.class [ className ] :: attributes)
                (TypedSvg.style [] [ TypedSvg.text stylesheet ] :: children)
        )
        animation