ryo-manba

ryo-manba / data-anim

Public

Animate with just HTML. Drop-in scroll animations using data attributes.

ryo-manba.github.iodata-anim animation css css-animations data-attributes html
14
0
100% credibility
Found Mar 15, 2026 at 14 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

data-anim is a lightweight tool that adds a variety of smooth animations to webpage elements using simple HTML tags.

How It Works

1
🔍 Discover data-anim

You stumble upon a simple way to make text, images, and buttons on your webpage smoothly appear, bounce, or slide in without any fancy coding skills.

2
📄 Add the magic starter

Paste one tiny line into your webpage's header to wake up the animation powers across your whole site.

3
✨ Tag your elements to dance

Add friendly notes like 'fade up' or 'zoom in' right on your headings, pictures, or lists so they know how to move when visitors arrive.

4
👀 Watch it come alive

Reload your page and scroll around to see everything gently animate, making your site feel fresh and welcoming.

5
🔧 Fine-tune the motion

Play with timing, speed, or triggers like clicks or hovers to make the movements feel just right for your style.

🎉 Your page sparkles

Sit back as your website captivates everyone with smooth, eye-catching motions that make it stand out effortlessly.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 14 to 14 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is data-anim?

data-anim is a lightweight TypeScript library that brings scroll-triggered animations to any HTML element using simple data attributes, like data-anim="fadeInUp". Drop it in via NPM or CDN, and your site gets 30+ built-in effects—fades, slides, zooms, bounces—without writing CSS keyframes or JS handlers. It solves the hassle of animating HTML5 canvas, dialogs, details elements, or SVGs by handling triggers like scroll, load, click, or hover right in markup.

Why is it gaining traction?

At under 3KB gzipped, it's a drop-in alternative to bulkier data animation tools like AOS or Animate.css, with extras like stagger effects, device-specific disabling, mobile fallback animations, and anti-FOUC to prevent flash-of-unstyled content. Developers love the zero-config setup for auto-animating on scroll or interactions, plus playground and docs for quick testing. It plays nice with React and Vue via attribute types, making HTML-centric animation feel native.

Who should use this?

Frontend devs building landing pages, portfolios, or marketing sites needing quick scroll animations on HTML tags without a build step. Solo makers prototyping data-anim CSS effects or animator data flows on elements like details or dialogs. Avoid if you need complex timelines rivaling After Effects exports.

Verdict

With 14 stars and 1.0% credibility score, it's early-stage but battle-ready thanks to solid docs, playground, and mutation handling for dynamic content—worth a spin for lightweight projects over heavier animate JS GitHub options. Skip for production if you crave more maturity.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.