blockanim-v2

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #machine-learning #rust #docker #nodejs #awesome #kubernetes #vue #security #ios #openai #open-source

(★ 12)

The simplest way to add scroll-triggered micro-interactions to your UI. No config, no JS to write - just add a class.

blockanim-v2 최신버젼 다운로드

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# blockAnim

**v2.0** · ~2kb gzipped · MIT License

## Animate any HTML element in one class.

The simplest way to add scroll-triggered micro-interactions to your UI. No config, no JS to write — just add a class.

---

## 🆕 New in v2: Cascade

**One class to rule them all.**

Introducing **Cascade** — animate all children of an element sequentially with a single class. No more copy-pasting delays on every item.

```html
<ul class="blockanim-slide-up-100-cascade">
  <li>Design</li>
  <li>Animate</li>
  <li>Ship</li>
  <li>Repeat</li>
</ul>
```

Works with `-repeat` too: `blockanim-slide-up-100-cascade-repeat`

---

## Why blockAnim?

Everything you need, nothing you don't.

| Feature | Description |
|---------|-------------|
| **⚡ Blazing Fast** | Only ~2kb gzipped. No dependencies, no bloat. Your page loads instantly while animations run buttery smooth at 60fps. |
| **🎯 One Class** | Add a single class to any HTML element. That's it. No JavaScript to write, no configuration needed. |
| **⏱️ Custom Delays** | Chain animations with custom delays in milliseconds. Create beautiful sequential reveals effortlessly. |
| **🔄 Repeat Mode** | Animations replay every time elements scroll into view. Perfect for long pages and portfolios. |
| **🎨 35+ Animations** | Slides, clips, fades, skews, diagonals, and more. A complete toolkit for modern web animations. |

---

## Get Started

Up and running in seconds.

### CDN (Recommended)

The fastest way. Just copy these two lines into your HTML file:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.css">
<script src="https://cdn.jsdelivr.net/gh/gc-guillaume/blockanim-v2/blockanim.min.js"></script>
```

### Download

Get the source code and customize animations to your needs.

---

## Documentation

### Simple, intuitive syntax.

One class pattern to rule them all. Combine animation type, delay, and repeat mode.

```
blockanim-{animation}-{delay}-repeat
```

| Part | Required | Description |
|------|----------|-------------|
| `{animation}` | ✅ Yes | The animation type |
| `{delay}` | ❌ Optional | Delay in ms |
| `-repeat` | ❌ Optional | Repeat on scroll |

### Examples

| Class | Type | Description |
|-------|------|-------------|
| `blockanim-{animation}` | Required | The animation to apply. Choose from 35+ options. |
| `blockanim-{anim}-{ms}` | Optional | Add a delay in milliseconds before the animation starts. |
| `blockanim-{anim}-repeat` | Optional | Replay the animation each time the element enters the viewport. |
| `blockanim-{anim}-{ms}-repeat` | Optional | Combine delay and repeat for full control. |

```html

<div class="blockanim-slide-up">...</div>

<div class="blockanim-slide-up-400">...</div>

<div class="blockanim-blur-in-repeat">...</div>

<div class="blockanim-clip-500-repeat">...</div>
```

---

## License

Open source under **MIT License**. Free for personal and commercial use.

---

## Author

**Guillaume Coulin**

Made with care on the Côte d'Azur.

[Portfolio](https://guillaumecoulin.com) · [LinkedIn](https://linkedin.com/in/guillaumecoulin) · [Contact](mailto:contact@guillaumecoulin.com)

blockanim-v2

blockanim-v2 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

blockanim-v2

blockanim-v2 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README