# @realmjs/animation-utils

> A collection of animation utility functions and keyframes for styled-components.

Latest version **1.0.0** (published 2023-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @realmjs/animation-utils
pnpm add @realmjs/animation-utils
yarn add @realmjs/animation-utils
bun add @realmjs/animation-utils
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-06-22 |
| First published | 2023-06-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Duong Nguyen |
| Maintainers | duongtdn |

## Links

- npm: https://www.npmjs.com/package/@realmjs/animation-utils
- Repository: https://github.com/realmjs/animation-utils
- Homepage: https://github.com/realmjs/animation-utils#readme
- Issues: https://github.com/realmjs/animation-utils/issues
- npm.io page: https://npm.io/package/@realmjs/animation-utils

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^6.0.0-rc.3

## Recent versions

- 1.0.0 (latest) — 2023-06-22

## README

# Animation Utils

A collection of animation utility functions and keyframes for styled-components.

## Installation

```bash
npm install @realmjs/animation-utils --save
```

## Usage

```javascript
import { extractAnimation, flyIn, fadeIn, zoomIn } from 'animation-utils';

// Extract animation type and duration
const animation = 'flyIn 0.5s';
const [type, duration] = extractAnimation(animation);
console.log(type); // 'flyIn'
console.log(duration); // '0.5s'

// Use predefined animation functions
const flyInAnimation = flyIn({ direction: 'left' });
const fadeInAnimation = fadeIn();
const zoomInAnimation = zoomIn();

// Example usage in styled-components
const Container = styled.div`
  animation: ${flyInAnimation} 0.4s ease-in-out;
`;


```

## API

### extractAnimation(animation: string): [type: string, duration: string]

Extracts the animation type and duration from the given animation string.

- `animation`: A string representing the animation in the format "type duration".
- Returns an array containing the animation type and duration.

### Animation Functions

The following animation functions are available for use:

#### stub()

A stub animation function that returns an empty string.

#### flyIn(options: { direction?: string }): Keyframes

Generates keyframes for a fly-in animation.

- `options`: An optional object with the following properties:
  - `direction`: The direction of the fly-in animation. Default is 'left'.
- Returns a `Keyframes` object for the fly-in animation.

#### fadeIn(): Keyframes

Generates keyframes for a fade-in animation.

- Returns a `Keyframes` object for the fade-in animation.

#### zoomIn(): Keyframes

Generates keyframes for a zoom-in animation.

- Returns a `Keyframes` object for the zoom-in animation.

## Default Durations

Each animation function has a `defaultDuration` property that represents its default duration.

- `stub.defaultDuration`: '0'
- `flyIn.defaultDuration`: '0.4s'
- `fadeIn.defaultDuration`: '0.8s'
- `zoomIn.defaultDuration`: '0.6s'

## License

This code is released under the [MIT License](LICENSE).

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