Scroll Magic Mouse Windows ◉ ❲Simple❳
<!-- SCENE 4 - Pin & final push (pinning demo) --> <section class="scene scene-4" id="scene4"> <div class="card" id="card4"> <h2>📌 Pin it!</h2> <p>This scene uses ScrollMagic's native pinning — the content stays fixed while background shifts, then releases. Smooth on Windows mouse.</p> <div id="pinCounter" style="font-size: 2rem; font-weight: 800; color:#ff6a3d;">0%</div> <p>Scroll progress inside pinned area</p> <div class="badge">end of main journey — infinite possibilities</div> </div> </section>
p font-size: 1.2rem; line-height: 1.5; font-weight: 300; color: #cdd9ff; scroll magic mouse windows
<!-- 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> section class="scene scene-4" id="scene4">
body font-family: 'Inter', sans-serif; background: #0a0c10; overflow-x: hidden; color: #eef2ff; div class="card" id="card4">
<!-- SCENE 2 - Parallax + Rotation effect --> <section class="scene scene-2" id="scene2"> <div class="card" id="card2"> <h2 id="rotateText">⚡ Parallax Power ⚡</h2> <p>This card rotates and scales as you scroll through the scene.<br>ScrollMagic synchronizes exactly with your mouse wheel on Windows.</p> <div class="animated-box" id="magicBox"></div> <div class="badge">rotation + scale + box color shift</div> </div> </section>