Animate On Scroll Cards
Cards that fade, zoom and flip into view as they enter the viewport, using the AOS library.
Requires AOS (Animate On Scroll). Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"><script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script><div class="aos-wrap">
<div class="aos-card" data-aos="fade-up">Fade up</div>
<div class="aos-card" data-aos="fade-up" data-aos-delay="150">Delayed</div>
<div class="aos-card" data-aos="zoom-in" data-aos-delay="300">Zoom in</div>
<div class="aos-card" data-aos="flip-left" data-aos-delay="450">Flip</div>
</div>body{background:#f6f7fa;align-items:stretch}
.aos-wrap{display:grid;gap:16px;width:280px;max-width:100%;padding:10px}
.aos-card{background:#fff;border:1px solid #eceef3;border-radius:14px;padding:26px;text-align:center;font:600 16px/1 system-ui,sans-serif;color:#1a1f36;box-shadow:0 8px 24px rgba(20,25,50,.06)}AOS.init({duration:700,once:false});
setInterval(function(){AOS.refreshHard&&AOS.refreshHard()},50);Free to use.This component uses AOS (Animate On Scroll) (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.