APL Transitions
This is collection of transitions for APL components implemented with AnimateItem. All the transitiosn are derived from css transitions available in Animate.css
For more alexa related tools/libraries visit - https://voicefirst.tools/
Usage
Adding Transitions to APL Document
Using Import
Copy the file apl-transitions.json to any storage of your choice with public access. And it can be imported into APL.
{
"type": "APL",
"version": "1.1",
"import": [
{
"name": "apl-transitions",
"version": "https://yourdomain.com/<path>/apl-transitions.json"
}
]
....
}
Using User Defined Commands
If you want to use only few transitions then you can just copy those transitions to "commands" in APL
{
"type": "APL",
"version": "1.1",
"import": [],
"commands": {
"fadeIn": {
....
},
"fadeOut": {
....
}
}
....
}
Attaching to Component
Transition can be added to components by adding it to the onMount event
{
"type": "Text",
"text": "APL 1.1 Transitions",
"onMount: [
{
"type": "fadeIn",
"duration": 1000
}
],
....
}
Parameters
(in milliseconds)
Required
duration Total duration of transition. Advised to be shorter. Required for all transitions
(in milliseconds)
Optional
delay Adds a optional delay to transitions before it starts
(Dimension)
Optional
Only for few transition
distance For few transitions you can configure the distance parameter to control the animation
Transitions
Here is the list of transitions available as User Defind Commands:
User Defined Commands | |||
---|---|---|---|
backInDown(duration,delay) |
backInLeft(duration,delay) |
backInRight(duration,delay) |
backInUp(duration,delay) |
backOutDown(duration,delay) |
backOutLeft(duration,delay) |
backOutRight(duration,delay) |
backOutUp(duration,delay) |
bounce(duration,delay) |
bounceIn(duration,delay) |
bounceInDown(duration,distance,delay) |
bounceInLeft(duration,distance,delay) |
bounceInRight(duration,distance,delay) |
bounceInUp(duration,distance,delay) |
bounceOut(duration,delay) |
bounceOutDown(duration,distance,delay) |
bounceOutLeft(duration,distance,delay) |
bounceOutRight(duration,distance,delay) |
bounceOutUp(duration,distance,delay) |
fadeIn(duration,delay) |
fadeInBottomLeft(duration,delay) |
fadeInBottomRight(duration,delay) |
fadeInDown(duration,distance,delay) |
fadeInLeft(duration,distance,delay) |
fadeInRight(duration,distance,delay) |
fadeInTopLeft(duration,delay) |
fadeInTopRight(duration,delay) |
fadeInUp(duration,distance,delay) |
fadeOut(duration,delay) |
fadeOutBottomLeft(duration,delay) |
fadeOutBottomRight(duration,delay) |
fadeOutDown(duration,distance,delay) |
fadeOutLeft(duration,distance,delay) |
fadeOutRight(duration,distance,delay) |
fadeOutTopLeft(duration,delay) |
fadeOutTopRight(duration,delay) |
fadeOutUp(duration,distance,delay) |
flash(duration,delay) |
headShake(duration,delay) |
heartBeat(duration,delay) |
hinge(duration,delay) |
jackInTheBox(duration,delay) |
jello(duration,delay) |
lightSpeedIn(duration,delay) |
lightSpeedInLeft(duration,delay) |
lightSpeedInRight(duration,delay) |
lightSpeedOut(duration,distance,delay) |
lightSpeedOutLeft(duration,delay) |
lightSpeedOutRight(duration,delay) |
pulse(duration,delay) |
rollIn(duration,delay) |
rollOut(duration,delay) |
rotateIn(duration,delay) |
rotateInDownLeft(duration,delay) |
rotateInDownRight(duration,delay) |
rotateInUpLeft(duration,delay) |
rotateInUpRight(duration,delay) |
rotateOut(duration,delay) |
rotateOutDownLeft(duration,delay) |
rotateOutDownRight(duration,delay) |
rotateOutUpLeft(duration,delay) |
rotateOutUpRight(duration,delay) |
rubberBand(duration,delay) |
shake(duration,delay) |
shakeX(duration,delay) |
shakeY(duration,delay) |
slideInDown(duration,distance,delay) |
slideInLeft(duration,distance,delay) |
slideInRight(duration,distance,delay) |
slideInUp(duration,distance,delay) |
slideOutDown(duration,distance,delay) |
slideOutLeft(duration,distance,delay) |
slideOutRight(duration,distance,delay) |
slideOutUp(duration,distance,delay) |
swing(duration,delay) |
tada(duration,delay) |
wobble(duration,delay) |
zoomIn(duration,delay) |
zoomInDown(duration,distance,delay) |
zoomInLeft(duration,distance,delay) |
zoomInRight(duration,distance,delay) |
zoomInUp(duration,distance,delay) |
zoomOut(duration,delay) |
zoomOutDown(duration,distance,delay) |
zoomOutLeft(duration,distance,delay) |
zoomOutRight(duration,distance,delay) |
zoomOutUp(duration,distance,delay) |