Elm Simple Animation
Stateless animation utils for Elm
See some examples here: https://elm-simple-animation-examples.vercel.app/
What?
Animate HTML, SVG (or any UI Elements) with declarative animations and transitions
A working example: https://ellie-app.com/d5nyjJY3Ptna1
import Html exposing (Html)
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated as Animated
import Simple.Animation.Property as P
animatedDot : Html msg
animatedDot =
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 ]
Why?
When you want some typesafe, simple, decorative animations or transitions, but you don't need the full power of something like elm-animator. The benefits of this are:
- Animations are
stateless(from Elm's perspective) so easy to drop in anywhere (no model, update or subscriptions required). - Very performant
-
Animationsgenerate CSS keyframes animations under the hood. -
Transitionsare a single Html Attribute with a CSS transition.
-
How?
For Animations:
A working example: https://ellie-app.com/d5nmZJv84f2a1
1 . Define an animation (either fromTo or a sequence of steps)
spinAndSlide : Animation
spinAndSlide =
Animation.steps
{ startAt = [ P.rotate 0, P.x 0 ]
, options = [ Animation.loop ]
}
[ Animation.step 1000 [ P.rotate 180, P.x 50 ]
, Animation.wait 500
, Animation.step 1000 [ P.rotate 360, P.x 0 ]
]2 . Render it on the page and let it fly!
spinningBox : Html msg
spinningBox =
Animated.div spinAndSlide [ class "spinning-box" ] []
For Transitions
A working example: https://ellie-app.com/d5nxzgtzCpva1
Just add a transition as a Html Attribute
glowingBox : Html msg
glowingBox =
div
[ class "gold-box-on-hover"
, Transition.properties
[ Transition.backgroundColor 500 []
, Transition.color 500 [ Transition.delay 100 ]
]
]
[ text "Hover over me" ]
Rendering an Animation with SVG, Elm UI and Others
So you can use your own version of elm/svg and mdgriffith/elm-ui (or whatever Html abstraction you use) there are some helpers that let you create animated versions:
Use with SVG
A working example: https://ellie-app.com/fYCGytWFDD7a1
So we can create animated Svgs, create an animated wrapper function using Svg.Attributes.class and Simple.Animation.Animated.svg
animatedSvg =
Simple.Animation.Animated.svg
{ class = Svg.Attributes.class
}This lets you wrap regular Svg nodes to make animated ones
animatedCircle : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
animatedCircle =
animatedSvg Svg.circle
animatedG : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
animatedG =
animatedSvg Svg.gHere's an animated circle with elm/svg
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated
import Simple.Animation.Property as P
import Svg exposing (Svg)
import Svg.Attributes exposing (cx, cy, r)
myCircle : Svg msg
myCircle =
animatedCircle fade [ cx "50", cy "50", r "50" ] []
fade : Animation
fade =
Animation.fromTo
{ duration = 1000
, options = []
}
[ P.opacity 0 ]
[ P.opacity 1 ]
animatedCircle : Animation -> List (Svg.Attribute msg) -> List (Svg msg) -> Svg msg
animatedCircle =
animatedSvg Svg.circle
animatedSvg =
Simple.Animation.Animated.svg
{ class = Svg.Attributes.class
}Use with Elm UI
A working example: https://ellie-app.com/cZTwvfZ37xWa1
So we can create animated els, rows or columns, create an animated wrapper function using Simple.Animation.Animated.ui and the following Element functions:
animatedUi =
Simple.Animation.Animated.ui
{ behindContent = Element.behindContent
, htmlAttribute = Element.htmlAttribute
, html = Element.html
}this lets you wrap regular Elements to create animated ones:
animatedEl : Animation -> List (Element.Attribute msg) -> Element msg -> Element msg
animatedEl =
animatedUi Element.el
animatedColumn : Animation -> List (Element.Attribute msg) -> List (Element msg) -> Element msg
animatedColumn =
animatedUi Element.columnHere's an animated square with elm-ui:
import Element exposing (..)
import Element.Background as Background
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated as Animated
import Simple.Animation.Property as P
mySquare : Element msg
mySquare =
animatedEl fade
[ width (px 30)
, height (px 30)
, Background.color (rgb 1 0 0)
]
none
fade : Animation
fade =
Animation.fromTo
{ duration = 1000
, options = []
}
[ P.opacity 0 ]
[ P.opacity 1 ]
animatedEl : Animation -> List (Attribute msg) -> Element msg -> Element msg
animatedEl =
animatedUi Element.el
animatedUi =
Animated.ui
{ behindContent = Element.behindContent
, htmlAttribute = Element.htmlAttribute
, html = Element.html
}Use with elm-css
A working example: https://ellie-app.com/fYDt8SJSkLha1
So we can create animated versions of elm-css divs, ps or any other Styled element, create an animated wrapper using Simple.Animation.Animated.elmCss and the following:
animatedElmCssNode =
Animated.elmCss
{ text = Html.Styled.text
, node = Html.Styled.node
, class = Html.Styled.Attributes.class
}this lets you wrap regular Html.Styled nodes to create animated ones:
animatedDiv : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
animatedDiv =
animatedElmCssNode Html.Styled.div
animatedLi : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
animatedLi =
animatedElmCssNode Html.Styled.liHere's an animated square using elm-css
import Css
import Html exposing (Html)
import Html.Styled as Styled
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Animated
import Simple.Animation.Property as P
import Html.Styled.Attributes as StyledAttributes
mySquare : Html msg
mySquare =
Styled.toUnstyled
(animatedDiv hover
[]
[ Styled.div
[ StyledAttributes.css
[ Css.width (Css.px 50)
, Css.height (Css.px 50)
, Css.backgroundColor (Css.hex "ff0000")
]
]
[]
]
)
hover : Animation
hover =
Animation.steps
{ startAt = [ P.y 0 ]
, options = [ Animation.loop, Animation.easeInOutQuad ]
}
[ Animation.step 500 [ P.y 20 ]
, Animation.step 650 [ P.y 0 ]
]
animatedDiv : Animation -> List (Styled.Attribute msg) -> List (Styled.Html msg) -> Styled.Html msg
animatedDiv =
animatedElmCssNode Styled.div
animatedElmCssNode =
Simple.Animation.Animated.elmCss
{ text = Styled.text
, node = Styled.node
, class = StyledAttributes.class
}
Use a Custom Renderer
In case you want to completely customise how to render animations you can use the low level Simple.Animation.Animated.custom - which 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)
)
animationYou can find many of these common helpers here: https://github.com/andrewMacmurray/elm-simple-animation/blob/main/examples/src/Utils/Animated.elm
Develop Locally
install dependencies
$ npm install
run the tests
$ npm test
run the examples
$ npm run examples
