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: Hello 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…
In plain words
Data-anim is a lightweight animation library for HTML that requires no JavaScript coding. Users add data attributes to elements to trigger 30+ built-in animations like fades, slides, and bounces, activated by scroll, load, click, or hover events. It includes anti-flashing protections, responsive animation controls for different devices, and TypeScript support. Weighing under 3KB with no dependencies, it targets developers building marketing sites and landing pages who want simple animations without heavy frameworks.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
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.
More life & fun this month
the category →- TL
Life & fun · 10d ago · louisabraham.github.io
Photosynthesis fires two of your iPhone
Life & fun · 28d ago · photosynthesis.camera
SoloUno▲310Take control of hair pulling, nail biting & skin picking
Life & fun · 28d ago · solouno.io
Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.
Life & fun · 26d ago · everycube.alen.is
Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…
Life & fun · 26d ago · baselashraf81.github.io
Launched alongside, March 2026
the whole month →
Switch from ChatGPT to Claude with import memory feature
AI · Mar 2026 · claude.com
