# @gozenc/animpure

> Simple functional JavaScript animation library without any dependencies.

Latest version **0.0.7** (published 2022-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @gozenc/animpure
pnpm add @gozenc/animpure
yarn add @gozenc/animpure
bun add @gozenc/animpure
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-09-22 |
| First published | 2022-09-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fatih Gözenç |
| Maintainers | gozenc |
| Keywords | animation, simple animate, no dependencies |

## Links

- npm: https://www.npmjs.com/package/@gozenc/animpure
- Repository: https://github.com/fatihgozenc/animpure
- Homepage: https://github.com/fatihgozenc/animpure#readme
- Issues: https://github.com/fatihgozenc/animpure/issues
- npm.io page: https://npm.io/package/@gozenc/animpure

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.7 (latest) — 2022-09-22
- 0.0.6 — 2022-09-22
- 0.0.5 — 2022-09-22
- 0.0.4 — 2022-09-22
- 0.0.3 — 2022-09-22
- 0.0.2 — 2022-09-22

## README

# animpure

## Simple Animation Library
It's complete functional JavaScript animation library without any dependencies. Simply animate anything with a progress callback. You can choose any easing you want.

## Installation

### NPM
```npm i @gozenc/animpure```

### Yarn
```yarn add @gozenc/animpure```

### Sample Usage
```javascript
import animate, { Eases } from "@gozenc/animpure";

const box = document.getElementById("box");

animate((progress: number) => {
	// Progress starts from 0 to 1
	// In this example; we want 0 to 100 so we multiply progress with 100
	// So it goes 0,1,2,3... instead of 0.000000001, 0.000000002...
	const animatedValue = (progress * 100).toFixed();
	box.style.width = animatedValue + "px"
}, 1000, Eases.inOutQuint) // If no ease is passed, it will be linear.
```
### Sample Usage with React as a Full Page Menu
You can use it a for full page menu, an example with React, Recoil and Tailwind classes. (If you willing to use this, you need to build a button to trigger the state):
```javascript

import React from "react";
import { menuOpenedState } from "../store";
import animate, { Eases } from "@gozenc/animpure";

export default function Menu() {

    const [menuOpened] = useRecoilState(menuOpenedState);
    const container = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
        if (!container.current) return;
        if (menuOpened) {
            animate((progress: number) => {
                const animatedValue = (progress * 100).toFixed();
                container.current.style.height = animatedValue + "vh";
            }, 1000, Eases.inOutQuint);
        } else {
            // If menu is not yet interacted - do nothing.
            if (container.current.style.height === "") return;
            animate((progress: number) => {
                const animatedValue = (100 - (progress * 100)).toFixed();
                container.current.style.height = animatedValue + "vh";
            }, 1000, Eases.inOutQuint);
        }
    }, [menuOpened]);

    const containerClasses = "bg-black fixed w-full z-20 border border-black";

    return (
        <div ref={container} className={containerClasses}/>
    );
}

```

### Thank you
For your interest. I am still developing it but you can download and use it. It's designed for thinking simple and lightweight code structures.

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