Style

This library is for animating css properties and is meant to work well with elm-html.

The easiest way to get started with this library is to check out the examples that are included with the source code.

Once you have the basic structure of how to use this library, you can refer to this documentation to fill any gaps.

Base Definitions

type Animation

An Animation of CSS properties.

Starting an animation

animate : PreAction

Begin describing an animation. This animation will cleanly interrupt any animation that is currently running.

  Style.animate
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left 0 Px
         , Opacity 1
         ]
     |> Style.on model.style

queue : PreAction

The same as animate but instead of interrupting the current animation, this will queue up after the current animation is finished.

  Style.queue
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

repeat : Float -> PreAction

Interrupt the current animation and begin repeating the specified one.

  Style.repeat 3
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

You can repeat forever by providing Infinity as the number.

  Style.repeat forever
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

queueRepeat : Float -> PreAction

Start a repeating animation after the current animation has finished.

  Style.queueRepeat 3
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

You can repeat forever by providing Infinity as the number.

  Style.queueRepeat forever
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

forever : Float

For use when defining animations that repeat forever.

import Style exposing (forever)

Style.repeat forever |> Style.update [ Rotate ((+) 1) Turn ] |> Style.on model.style

Creating animations

delay : Time -> PreAction -> PreAction

Specify a delay. If not specified, the default is 0.

 Style.animate
     |> Style.duration (0.4*second)
     |> Style.delay (0.5*second)
     |> Style.to
         [ Left 0 Px
         , Opacity 1
         ]
     |> Style.on model.style

spring : SpringProps -> PreAction -> PreAction

Animate based on spring physics.

You'll need to provide both a stiffness and a dampness to this function.

Note: This will cause both duration and easing to be ignored as they are now controlled by the spring.

 Style.animate
  -- |> Style.spring Style.noWobble -- set using a UI preset
     |> Style.spring
            { stiffness = 400
            , damping = 28
            }
     |> Style.to
         [ Left (Style.to 0) Px
         , Opacity (Style.to 1)
         ]
     |> Style.on model.style

duration : Time -> PreAction -> PreAction

Specify a duration. This is ignored unless an easing is specified as well! This is because spring functions (the default), have dynamically created durations.

If an easing is specified but no duration, the default duration is 350ms.

 Style.animate
     |> Style.easing (\x -> x)  -- linear easing
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left 0 Px
         , Opacity 1
         ]
     |> Style.on model.style

easing : (Float -> Float) -> PreAction -> PreAction

Specify an easing function. It is expected that values should match up at the beginning and end. So, f 0 == 0 and f 1 == 1. The default easing is sinusoidal in-out.

andThen : PreAction -> PreAction

Append another keyframe. This is used for multistage animations.

For example, to cycle through colors, we'd use the following:

  Style.animate
      |> Style.to
          [ BackgroundColor
                Style.toRGBA 100 100 100 1.0
          ]
      |> Style.andThen -- create a new keyframe
      |> Style.duration (1*second)
      |> Style.to
          [ BackgroundColor
                Style.toRGBA 178 201 14 1.0
          ]
      |> Style.andThen
      |> Style.to
          [ BackgroundColor
                Style.toRGBA 58 40 69 1.0
          ]
      |> Style.on model.style

Animating Properties

to : Style -> PreAction -> PreAction

Animate to a statically specified style.

set : Style -> PreAction -> PreAction

Apply a style immediately. This takes a list of static style properties, meaning the no Style.to functions, only concrete numbers and values.

Style.animate
     |> Style.duration (0.4*second)
     |> Style.to
         [ Opacity (Style.to 1)
         ]
  |> Style.andThen
     |> Style.set
         [ Display None
         ]
     |> Style.on model.style

update : List Retarget -> PreAction -> PreAction

Update a style based on it's previous value.

 Style.animate
      |> Style.update
          [ Cx ((+) 1)
          , Cy ((+) 1)
          , Color greyscale
          ]
      |> Style.on model.style

Render a Animation into CSS or as SVG attributes

render : Animation -> List ( String, String )

Render into concrete css that can be directly applied to 'style' in elm-html

div [ style Style.render widget.style) ] [ ]

renderAttr : Animation -> List (Attribute msg)

Render into svg attributes.

polygon (Style.renderAttr widget.style) [ ]

Set the starting style

init : Style -> Animation

Create an initial style for your init model.

Note All properties that you animate must be present in the init or else that property won't be animated.

Managing Commands

on : Animation -> PreAction -> Animation

Apply an update to a Animation model.

 Style.animate
     |> Style.duration (0.4*second)
     |> Style.to
         [ Left 0 Px
         , Opacity 1
         ]
     |> Style.on model.style

tick : Float -> Animation -> Animation

Step the animation

mdgriffith/elm-style-animation/2.0.0