Data-anim

Details

External ID

47377195

Source

HN

Company

—

Product

Data-anim

Website domain

github.com

Launched

March 14, 2026

Cohort

—

Upvotes

19

Upvotes percentile

0.7312423124231242

Tags

—

Fetched at

Sept. 7, 2026, 9:26 p.m.

Updated at

Sept. 7, 2026, 9:26 p.m.

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 dependenciesWhy 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-animHappy to answer any questions about the implementation or design decisions.

• Source listing
• Website