Build an Animation for rendering on the page
All animation durations are in milliseconds
Create an animation with start and end properties:
fadeOut : Animation
fadeOut =
Animation.fromTo
{ duration = 1000
, options = []
}
[ P.opacity 1 ]
[ P.opacity 0 ]Create an animation with multiple steps:
backAndForth : Animation
backAndForth =
Animation.steps
{ startAt = [ P.x 0 ]
, options = []
}
[ Animation.step 1000 [ P.x 100 ]
, Animation.step 1000 [ P.x 0 ]
]Animate to a list of properties for a given number of milliseconds:
Animation.step 1000 [ P.opacity 1 ]Set a list of properties immediately in an animation (This is equivalent to step 1):
Animation.set [ P.opacity 0 ]Wait for a given number of milliseconds before animating the next properties:
Animation.wait 1000Wait for another animation to complete before animating the next properties:
This animation will wait for 1500 milliseconds before animating to the next step
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 an behaviour of an animation
Repeat an animation forever
Play an animation a given number of times
Delay the start of an animation (repeats like loop or count are not affected by this)
Standard CSS eases
See what these eases look and feel like: https://easings.net
Get the duration of an animation