apl-transitions

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #rust #docker #nodejs #macos #java #awesome #cli #vue #awesome-list #open-source

apl-transitions

(★ 34)

Collection of transitions for APL components implemented with AnimateItem

apl-transitions 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://github.com/daneden/animate.css)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/arjunganesan)

For more alexa related tools/libraries visit - https://voicefirst.tools/

# Usage

## Adding Transitions to APL Document

### Using Import

Copy the file [apl-transitions.json](https://github.com/arjun-g/apl-transitions/blob/master/dist/apl-transitions.json) to any storage of your choice with public access. And it can be imported into APL.

```json
{
 "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

```json
{
    "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

```json
{
    "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)` | |

apl-transitions

apl-transitions 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

apl-transitions

apl-transitions 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README