A library for animations.
Model.Animation Basics.Never
Note - The compiler will refer to your Animation.State
as Animation.Model.Animation msg
subscription : (Msg -> msgB) -> List (Model.Animation msgA) -> Platform.Sub.Sub msgB
Create a subscription to Browser.Events.onAnimationFrame
.
It is throttled based on whether the current animation is running or not.
Model.Tick
render : Model.Animation msgA -> List (Html.Attribute msgB)
Render style properties into the style attribute and render other attributes as needed for svg.
Combine "transform" based properties into a single css property.
Combine "filter" based properties into a single css property.
renderPairs : Model.Animation msgA -> List ( String, String )
Render style properties into the style attribute.
Combine "transform" based properties into a single css property.
Combine "filter" based properties into a single css property.
Note this method will not render svg properties like Animation.points
.
interrupt : List (Model.Step msg) -> Model.Animation msg -> Model.Animation msg
Interrupt any running animations with the following animation.
queue : List (Model.Step msg) -> Model.Animation msg -> Model.Animation msg
Add an animation to the queue, execiting once the current animation finishes
Model.Step Basics.Never
wait : Time.Posix -> Model.Step msg
to : List Model.Property -> Model.Step msg
Animate to a set of target values, using the default interpolation.
toWith : Model.Interpolation -> List Model.Property -> Model.Step msg
Animate to a set of target values. Use a temporary interpolation instead of the default. The interpolation will revert back to default after this step.
toWithEach : List ( Model.Interpolation, Model.Property ) -> Model.Step msg
Animate to a set of target values. Use a temporary interpolation for each property instead of the default. The interpolation will revert back to default after this step.
set : List Model.Property -> Model.Step msg
Immediately set properties to a value.
clear : Model.Step msg
Immediately clear properties.
repeat : Basics.Int -> List (Model.Step msg) -> Model.Step msg
Repeat a number of steps n
times.
loop : List (Model.Step msg) -> Model.Step msg
Repeat a number of steps until interrupted.
update : Msg -> Model.Animation msg -> Model.Animation msg
Update an animation.
style : List Model.Property -> Model.Animation msg
Set an initial style for an animation.
Uses standard defaults for interpolation
styleWith : Model.Interpolation -> List Model.Property -> Model.Animation msg
Set an initial style for an animation and override the standard default for interpolation.
styleWithEach : List ( Model.Interpolation, Model.Property ) -> Model.Animation msg
Set an initial style for an animation and specify the interpolation to be used for each property.
Any property not listed will receive interpolation based on the standard defaults.
Model.Interpolation
spring : { stiffness : Basics.Float, damping : Basics.Float } -> Model.Interpolation
Specify a custom Spring to animate with. To be used in conjunction with StyleWith
, StyleWithEach
, toWith
, and toWithEach
.
This should be your preferred interpolation to use.
easing : { duration : Milliseconds, ease : Basics.Float -> Basics.Float } -> Model.Interpolation
Specify a custom Easing to animate with. To be used in conjunction with StyleWith
, StyleWithEach
, toWith
, and toWithEach
.
The elm-community/easing-functions package has a bunch of useful easing functions!
speed : { perSecond : Basics.Float } -> Model.Interpolation
Specify a speed to animate with. To be used in conjunction with StyleWith
, StyleWithEach
, toWith
, and toWithEach
.
Generally you don't want this. It's used in the special case of the default interpolation for rotation.
Use Animation.spring
or Animation.easing
instead as they are more powerful.
Model.Property
opacity : Basics.Float -> Model.Property
top : Length -> Model.Property
left : Length -> Model.Property
right : Length -> Model.Property
bottom : Length -> Model.Property
width : Length -> Model.Property
height : Length -> Model.Property
padding : Length -> Model.Property
paddingLeft : Length -> Model.Property
paddingRight : Length -> Model.Property
paddingTop : Length -> Model.Property
paddingBottom : Length -> Model.Property
margin : Length -> Model.Property
marginLeft : Length -> Model.Property
marginRight : Length -> Model.Property
marginTop : Length -> Model.Property
marginBottom : Length -> Model.Property
{ red : Basics.Int
, green : Basics.Int
, blue : Basics.Int
, alpha : Basics.Float
}
color : Color -> Model.Property
backgroundColor : Color -> Model.Property
borderColor : Color -> Model.Property
borderWidth : Length -> Model.Property
borderLeftWidth : Length -> Model.Property
borderRightWidth : Length -> Model.Property
borderTopWidth : Length -> Model.Property
borderBottomWidth : Length -> Model.Property
borderRadius : Length -> Model.Property
borderTopLeftRadius : Length -> Model.Property
borderTopRightRadius : Length -> Model.Property
borderBottomLeftRadius : Length -> Model.Property
borderBottomRightRadius : Length -> Model.Property
shadow : Shadow -> Model.Property
textShadow : Shadow -> Model.Property
Text shadows will ignore the shadow's size
value. This is just one of the bizarre quirks of CSS.
insetShadow : Shadow -> Model.Property
display : DisplayMode -> Model.Property
inline : DisplayMode
inlineBlock : DisplayMode
flex : DisplayMode
inlineFlex : DisplayMode
block : DisplayMode
none : DisplayMode
listItem : DisplayMode
scale : Basics.Float -> Model.Property
scale3d : Basics.Float -> Basics.Float -> Basics.Float -> Model.Property
rotate : Angle -> Model.Property
rotate3d : Angle -> Angle -> Angle -> Model.Property
translate : Length -> Length -> Model.Property
translate3d : Length -> Length -> Length -> Model.Property
transformOrigin : Length -> Length -> Length -> Model.Property
filterUrl : String -> Model.Property
Create a CSS filter-url
blur : Length -> Model.Property
Create a CSS blur filter, these stack with other filters.
brightness : Basics.Float -> Model.Property
Create a CSS brightness filter, these stack with other filters.
contrast : Basics.Float -> Model.Property
Create a CSS contrast filter, these stack with other filters.
grayscale : Basics.Float -> Model.Property
Create a CSS grayscale filter, these stack with other filters.
greyscale : Basics.Float -> Model.Property
Create a CSS grayscale filter, these stack with other filters. This is a spelling adjusment.
hueRotate : Angle -> Model.Property
Create a CSS hue-rotation filter, these stack with other filters.
invert : Basics.Float -> Model.Property
Create a CSS invert filter, these stack with other filters.
saturate : Basics.Float -> Model.Property
Create a CSS saturate filter, these stack with other filters.
sepia : Basics.Float -> Model.Property
Create a CSS sepia filter, these stack with other filters.
dropShadow : Shadow -> Model.Property
Drop shadows will ignore the shadow's size
value. This is just one of the bizarre quirks of CSS.
viewBox : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Model.Property
fill : Color -> Model.Property
stroke : Color -> Model.Property
strokeWidth : Basics.Float -> Model.Property
stopColor : Color -> Model.Property
Used for svg gradients
offset : Basics.Float -> Model.Property
Used for svg gradients. Accepts a number between 0 and 1.
x : Basics.Float -> Model.Property
y : Basics.Float -> Model.Property
cx : Basics.Float -> Model.Property
cy : Basics.Float -> Model.Property
radius : Basics.Float -> Model.Property
radiusX : Basics.Float -> Model.Property
radiusY : Basics.Float -> Model.Property
points : List ( Basics.Float, Basics.Float ) -> Model.Property
Used with the svg polygon element
path : List Model.PathCommand -> Model.Property
To be used with the svg path element. Renders as the d property.
Model.PathCommand
move : Basics.Float -> Basics.Float -> Model.PathCommand
moveTo : Basics.Float -> Basics.Float -> Model.PathCommand
line : Basics.Float -> Basics.Float -> Model.PathCommand
lineTo : Basics.Float -> Basics.Float -> Model.PathCommand
horizontal : Basics.Float -> Model.PathCommand
horizontalTo : Basics.Float -> Model.PathCommand
vertical : Basics.Float -> Model.PathCommand
verticalTo : Basics.Float -> Model.PathCommand
close : Model.PathCommand
Close a Path
{ control : ( Basics.Float
, Basics.Float )
, point : ( Basics.Float
, Basics.Float )
}
curve : QuadraticCurve -> Model.PathCommand
Create a relative curve with 1 control point and a target point. This is a Quadratic curve in teh svg spec.
curveTo : QuadraticCurve -> Model.PathCommand
Create an absolute curve with 1 control point and a target point. This is a Quadratic curve in teh svg spec.
{ control1 : ( Basics.Float
, Basics.Float )
, control2 : ( Basics.Float
, Basics.Float )
, point : ( Basics.Float
, Basics.Float )
}
curve2 : CubicCurve -> Model.PathCommand
Create a relative Curve with 2 control points and a target point. This is a Cubic Curve in the svg spec.
curve2To : CubicCurve -> Model.PathCommand
Create an absolute Curve with 2 control points and a target point. This is a Cubic Curve in the svg spec.
arc : Arc -> Model.PathCommand
{ x : Basics.Float
, y : Basics.Float
, radius : Basics.Float
, startAngle : Basics.Float
, endAngle : Basics.Float
, clockwise : Basics.Bool
}
px : Basics.Float -> Length
percent : Basics.Float -> Length
em : Basics.Float -> Length
rem : Basics.Float -> Length
turn : Basics.Float -> Angle
deg : Basics.Float -> Angle
grad : Basics.Float -> Angle
rad : Basics.Float -> Angle
exactly : String -> String -> Model.Property
Set a non-numerical to an exact value. This is generally only used with Animation.set
.
For example
Animation.set
[ Animation.exactly "border-style" "dashed"
]
custom : String -> Basics.Float -> String -> Model.Property
Animate a custom style property by providing it's name, a float value, and the units it should have.
custom2 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property
customColor : String -> Color -> Model.Property
attr : String -> Basics.Float -> String -> Model.Property
Animate a custom attribute by providing it's name, a float value, and the units it should have.
attr2 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property
attr3 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property
attr4 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property
attrColor : String -> Color -> Model.Property
isRunning : Model.Animation msg -> Basics.Bool
Check if the Animation is currently running