Build an Animation for rendering on the page.
Internal.Animation.Animation
Animation to be rendered with Simple.Animation.Animated
functions.
Internal.Unit.Millis
Time unit for all Animations.
fromTo : { duration : Millis, options : List Option } -> List Property -> List Property -> Animation
Create an animation with start
and end
properties:
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P
fadeOut : Animation
fadeOut =
Animation.fromTo
{ duration = 1000
, options = []
}
[ P.opacity 1 ]
[ P.opacity 0 ]
steps : { startAt : List Property, options : List Option } -> List Step -> Animation
Create an animation with multiple steps:
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P
backAndForth : Animation
backAndForth =
Animation.steps
{ startAt = [ P.x 0 ]
, options = []
}
[ Animation.step 1000 [ P.x 100 ]
, Animation.step 1000 [ P.x 0 ]
]
empty : Animation
Create an Empty Animation - Useful when you want to conditionally animate something.
fadeIf : Bool -> Animation
fadeIf shouldFade =
if shouldFade then
Animation.fromTo
{ duration = 1000
, options = []
}
[ P.opacity 0 ]
[ P.opacity 1 ]
else
Animation.empty
Animation.empty
is equivalent to an animation with 0
duration.
Build up a multi step animation
step : Millis -> List Property -> Step
Animate to a list of properties for a given number of milliseconds
:
Animation.step 1000 [ P.opacity 1 ]
set : List Property -> Step
Set a list of properties immediately in an animation (This is equivalent to step 1
):
Animation.set [ P.opacity 0 ]
wait : Millis -> Step
Wait for a given number of milliseconds
before animating the next properties:
Animation.wait 1000
waitTillComplete : Animation -> Step
Wait for another animation to complete before animating the next properties.
This animation will wait
for 1500
milliseconds before animating to the next step:
import Simple.Animation as Animation exposing (Animation)
import Simple.Animation.Property as P
finishAfterFadeOut : Animation
finishAfterFadeOut =
Animation.steps
{ startAt = [ P.x 0 ]
, options = []
}
[ Animation.step 500 [ P.x 20 ]
, Animation.waitTillComplete fadeOut
, Animation.step 500 [ P.x 60 ]
]
fadeOut : Animation
fadeOut =
Animation.fromTo
{ duration = 2000
, options = []
}
[ P.opacity 1 ]
[ P.opacity 2 ]
Customise the feel and behaviour of an animation.
Internal.Animation.Option
loop : Option
Repeat an animation forever
count : Basics.Int -> Option
Play an animation a given number of times
delay : Millis -> Option
Delay the start of an animation (repeats like loop
or count
are not affected by this)
reverse : Option
Play animation in reverse
yoyo : Option
When animation completes, play it in reverse
Standard CSS eases.
linear : Option
easeIn : Option
easeOut : Option
easeInOut : Option
cubic : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Option
See what these eases look and feel like: https://easings.net
easeInSine : Option
easeOutSine : Option
easeInOutSine : Option
easeInQuad : Option
easeOutQuad : Option
easeInOutQuad : Option
easeInCubic : Option
easeOutCubic : Option
easeInOutCubic : Option
easeInQuart : Option
easeOutQuart : Option
easeInOutQuart : Option
easeInQuint : Option
easeOutQuint : Option
easeInOutQuint : Option
easeInExpo : Option
easeOutExpo : Option
easeInOutExpo : Option
easeInCirc : Option
easeOutCirc : Option
easeInOutCirc : Option
easeInBack : Option
easeOutBack : Option
easeInOutBack : Option
duration : Animation -> Millis
Get the duration of an animation.