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…
Data-anim – Animate HTML with just data attributes launched on March 14, 2026 with 19 votes, #885 of 23,380 launches that month and more than 90% of that year's launches.
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
Animate with just HTML. Drop-in animations using data attributes. - ryo-manba/data-anim
Add a script tag. Write attributes. Your HTML comes alive. Under 3KB gzipped with 30+ animations, 4 triggers, and built-in anti-FOUC protection. npm install data-anim import 'data-anim' ; CDN < script src =" https://unpkg.com/data-anim/dist/data-anim.min.js " > </ script > Usage < h1 data-anim =" fadeInUp " > Hello World </ h1 > Visit the Documentation to view the full API reference. Try the Playground to experiment with animations interactively. Chrome Extension data-anim Inspector — Chrome extension for browsing and previewing animations in the browser. Visit https://ryo-manba.github.io/data-anim/ to view the full documentation. Contributions to data-anim are welcome and highly…from github.com
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…
Does a similar job
all alternatives →
Anime.js – Polyvalent JavaScript Animation Engine2016 · anime-js.com · ▲283A fast, multipurpose and lightweight JavaScript animation library
Motion One – New animation library, built on the Web Animations API2021 · motion.dev · ▲327Motion (prev Framer Motion) is a fast, production-grade animation library for React, JavaScript and Vue. Build smooth UI animations at a tiny footprint.
More life & fun this month
the category →
A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.
Life & fun · 1d ago · permit.petercai.com
- IV
Life & fun · 13d ago · tanzaniaeducationproject.org
Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.
Life & fun · 14d ago · bigwords.page
Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.
Life & fun · 8d ago · guitoro.com
Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.
Life & fun · 12d ago · carrierexplode.com
Life & fun · 22d ago · space.bl2.net
Source: Show HN post ↗ · launch text quoted in part
Launched alongside, March 2026
the whole month →
Switch from ChatGPT to Claude with import memory feature
AI · Mar 2026 · claude.com
Littlebird▲709Littlebird remembers everything across your meetings, messages, docs, and apps, then takes action so you can recall any detail and never lose context.
AI · Mar 2026 · littlebird.ai
