HN Showcase
Back to browse
GitHub Repository

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

74 starsTypeScript

Data-anim – Animate HTML with just data attributes

by ryo-manba·Mar 14, 2026·19 points·7 comments
Visit ProjectView on HN

AI Analysis

●●SolidCozyNiche Gem

Under 3KB gzipped with 30+ animations — lighter than Framer Motion's 30KB.

Strengths
  • •3-layer anti-FOUC protection prevents flash of unstyled content on page load
  • •Zero dependencies with TypeScript autocomplete for all data attributes
  • •Responsive controls disable or swap animations per device type
Weaknesses
  • •Data-attribute animations already exist in AOS.js and animate.css
  • •Limited to simple animations — complex sequences still need Framer Motion
Target Audience

Frontend developers building landing pages

Similar To

AOS.js · animate.css · Framer Motion

Post Description

Hey HN, I built data-anim — an animation library where you never have to write JavaScript yourself.

You just write:

<div data-anim="fadeInUp">Hello</div>

That's it. Scroll-triggered fade-in animation, zero JS to write.

What it does:

- 30+ built-in animations (fade, slide, zoom, bounce, rotate, etc.)

- 4 triggers: scroll (default), load, click, hover

- 3-layer anti-FOUC protection (immediate style injection → noscript fallback → 5s timeout)

- Responsive controls: disable per device or swap animations on mobile

- TypeScript autocomplete for all attributes

- Under 3KB gzipped, zero dependencies

Why I built this:

I noticed that most animation needs on landing pages and marketing sites are simple — fade in on scroll, slide in from left, bounce on hover. But the existing options are either too heavy (Framer Motion ~30KB) or require JS boilerplate.

I also think declarative HTML attributes are the most AI-friendly animation format. When LLMs generate UI, HTML attributes are the output they hallucinate least on — no selector matching, no JS API to misremember, no script execution order to get wrong.

Docs: https://ryo-manba.github.io/data-anim/

Playground: https://ryo-manba.github.io/data-anim/playground/

npm: https://www.npmjs.com/package/data-anim

Happy to answer any questions about the implementation or design decisions.

Similar Projects