[HN Gopher] Show HN: Data-anim - Animate HTML with just data att...
___________________________________________________________________
Show HN: Data-anim - Animate HTML with just data attributes
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.
Author : ryo-manba
Score : 7 points
Date : 2026-03-14 14:42 UTC (8 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| hyperhello wrote:
| 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.
___________________________________________________________________
(page generated 2026-03-14 23:01 UTC)