<footer> ScrollMagic + GSAP | Optimized for Windows Mouse & Trackpad | Full article demonstration </footer>
<!-- SCENE 3 - Staggered gallery items (each element reacts individually) --> <section class="scene scene-3" id="scene3"> <div class="card" id="card3"> <h2>✨ Gallery Pulse ✨</h2> <p>Each item fades & slides independently — controlled by ScrollMagic timeline.</p> <div class="flex-gallery" id="gallery"> <div class="gallery-item" data-g="1">🎨</div> <div class="gallery-item" data-g="2">🚀</div> <div class="gallery-item" data-g="3">⚙️</div> <div class="gallery-item" data-g="4">💡</div> </div> <div class="spacer-message">scroll further → elements fly in</div> </div> </section> scroll magic mouse windows
.badge display: inline-block; background: #ff6a3d20; padding: 0.3rem 1rem; border-radius: 40px; font-size: 0.85rem; font-weight: 500; color: #ff8c5a; margin-top: 1rem; border: 0.5px solid #ff6a3d60; <footer> ScrollMagic + GSAP | Optimized for Windows
.flex-gallery display: flex; gap: 2rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; .gallery-item background: #1e2432; width: 120px; height: 120px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; transition: all 0.2s; section class="scene scene-3" id="scene3">
footer text-align: center; padding: 2rem; font-size: 0.85rem; background: #05070a; color: #6c7a91;
<!-- SCENE 1 - Fade & Scale entrance --> <section class="scene scene-1" id="scene1"> <div class="card" id="card1"> <div class="rotate-icon">🌀</div> <h1>ScrollMagic + GSAP</h1> <p>Seamless scroll-driven animations • Perfect on Windows mouse wheel<br>Experience buttery smooth triggers with every tick.</p> <div class="badge">▼ scroll down to unleash magic ▼</div> </div> </section>
<script> (function() )(); </script> </body> </html>