Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 

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

ko-fi

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

duration (in milliseconds) Required

Total duration of transition. Advised to be shorter. Required for all transitions

delay (in milliseconds) Optional

Adds a optional delay to transitions before it starts

distance (Dimension) Optional Only for few transition

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)

About

Collection of transitions for APL components implemented with AnimateItem

Resources

License

Releases

No releases published

Packages

No packages published