This module gives you animated Html
div
s out of the box, and some helpers to create animated versions of whatever UI
library you're using.
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
div : Simple.Animation.Animation -> List (Html.Attribute msg) -> List (Html msg) -> Html msg
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
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
{ 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
{ 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
Element
s
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
{ 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
String
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