Show HN: Data-anim – Animate HTML with just data attributes

[ryo-manba]

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.

[ricardobeat]

The demo page scroll is very janky, which detracts from the animations entirely. Seems to be because of the excessive use of blur filters - the cards are on a black background so the filter is not doing anything anyway.

(I'm on a brand new PC with pretty good hardware. It's not as bad on the Mac, but it still can't keep up 60fps)

[ryo-manba]

Thanks for the report! I've removed the blur filters.

[ata-sesli]

Nice idea, this looks like it simplifies a lot of the common animation cases.

Have you thought about allowing animations to be chained or sequenced? For example running one animation after another using multiple data attributes.

[ryo-manba]

Thanks! Stagger is already supported with configurable delay and direction: https://ryo-manba.github.io/data-anim/docs/stagger/

Chaining across different elements isn't supported yet, but great idea. Will look into it.

[hyperhello]

I like the simplicity. Great job. Though I could have used a demo page with a block for every animation at once instead of poking at choices.

[ryo-manba]

Thanks for the feedback! I've updated the docs with a page that lists all animations in one place: https://ryo-manba.github.io/data-anim/docs/animations/

[hyperhello]

Great. That’s what I was thinking.