Show HN: Data-anim – Animate HTML with just data attributes(github.com)
github.com
Show HN: Data-anim – Animate HTML with just data attributes
https://github.com/ryo-manba/data-anim
8 comments
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)
(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)
Thanks for the report! I've removed the blur filters.
[deleted]
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.
Have you thought about allowing animations to be chained or sequenced? For example running one animation after another using multiple data attributes.
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.
Chaining across different elements isn't supported yet, but great idea. Will look into it.
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.
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/
Great. That’s what I was thinking.
You just write:
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.