# @dyrektrypt/animations

> Custom made animations for web development.

Latest version **2.1.0** (published 2021-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dyrektrypt/animations
pnpm add @dyrektrypt/animations
yarn add @dyrektrypt/animations
bun add @dyrektrypt/animations
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-07-06 |
| First published | 2021-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dyrektrypt |
| Maintainers | dyrektrypt |
| Keywords | es6, typescript, html5, animations |

## Links

- npm: https://www.npmjs.com/package/@dyrektrypt/animations
- Repository: https://github.com/Dyrektrypt/animations
- Homepage: https://github.com/Dyrektrypt/animations#readme
- Issues: https://github.com/Dyrektrypt/animations/issues
- npm.io page: https://npm.io/package/@dyrektrypt/animations

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2021-07-06
- 2.0.0 — 2021-07-04
- 1.0.1 — 2021-06-06

## README

# **animations**
---
A simple to learn and use API for custom animations in HTML5; supporting Typescript, ES and UMD.
> See **'installation'** for obtaining the API.

> See **'usage'** for learning how to use the API.  

## **installation**
---
Simply install the repository using npm.
```shell
#Assuming you are in your project's directory
npm i @dyrektrypt/animations
```
And that's it! Now all you need to do is import desired custom animations.

Please note:
* For Typescript - the tsconfig property `moduleResolution: node` should be present in order to support npm imports.
* For ES modules - code should be transpiled to UMD or similar variants by using either webpack, rollup or browserify. 

## **usage**
---
Custom animations work similar to the normal DOM `Animation` object but add extra functionality; controlling how properties change - rather than just changing properties over a set interval.

Animations come with at least two methods:
* (async) play - start and run the animation, using the `playClassValue`.
* (async) halt - stop and reset the animation, using the `haltClassValue`.

To use animations, create an instance of the desired custom animation, which follows the constructor:
```
constructor(elements: Array<HTMLElement>, animationConfig: AnimationConfig)
```
Noting `AnimationConfig` being an object with properties:
* `playClassValue: string = ''`
* `haltClassValue: string = ''`
* `interval: number`

The current custom animations are as follows:
* LoadAnimation:
  * play - loads properties linearly, detaching the `haltClassValue` and attaching the `playClassValue` after a set `interval`.
  * halt - unloads elements linearly, detaching the `playClassValue` and attaching the `haltClassValue`. 
* BlinkAnimation:
  * play - makes properties blink, switching between the `playClassValue` and then the `haltClassValue` every set `interval`.
  * halt - stops the elements from blinking, detaching the `playClassValue` and attaching the `haltClassValue`.

New custom animations are always welcome!

To enforce good coding conventions, animations change only the `class` property on HTML elements. However animations are declarative, and will only change values defined in the constructor - preventing the need to hard code all class names in an instance.

An example of this:
### HTML5
```HTML
<input class="main-input hidden"/>
```

### ES6
```ES6
import { BlinkAnimation } from '@dyrektrypt/animations'

//Fetch all 'main-input' elements
let elements = document.getElementByClassName('main-input')

//Create a new blinking animation
let blinkAnimation = new BlinkAnimation(elements, {
    haltClassValue: 'hidden', //The value for halting will be 'hidden'
    interval: 100 //The animation will be called every 100ms
})

blinkAnimation.play()
```
This will cause the input field to start 'blinking', switching between being `'hidden'` and `''`.

Notice how only the `'hidden'` is declared in the constructor, this causes `'main-input'` to remain untouched.

---

---
_Source: https://npm.io/package/@dyrektrypt/animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._