data-anim

KO | EN

gitlite — search

#python #typescript #react #nodejs #hacktoberfest #reactjs #discord #config #pytorch #docker #react-native #postgresql

★ 75 Open GitHub ↗

Animate with just HTML. Drop-in animations using data attributes.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

</div>

## Getting Started

Add a script tag. Write attributes. Your HTML comes alive. Under 3KB gzipped with 30+ animations, 4 triggers, and built-in anti-FOUC protection.

### npm

```bash
npm install data-anim
```

```js
import 'data-anim';
```

### CDN

```html
<script src="https://unpkg.com/data-anim/dist/data-anim.min.js"></script>
```

### Usage

```html
<h1 data-anim="fadeInUp">Hello World</h1>
```

- Visit the [Documentation](https://ryo-manba.github.io/data-anim/) to view the full API reference.
- Try the [Playground](https://ryo-manba.github.io/data-anim/playground/) to experiment with animations interactively.

## Chrome Extension

[data-anim Inspector](https://chromewebstore.google.com/detail/data-anim-inspector/cocpaadjbnbeakonflehnoefjlkhpnmb) — Chrome extension for browsing and previewing animations in the browser.

## Documentation

Visit [https://ryo-manba.github.io/data-anim/](https://ryo-manba.github.io/data-anim/) to view the full documentation.

## Contributing

Contributions to data-anim are welcome and highly appreciated. Please review our [Contribution Guidelines](CONTRIBUTING.md) before getting started.

## License

[MIT](LICENSE)

data-anim

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README