Scroll Magic Mouse 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;

// ========== SCENE 4: PINNING + progress counter ========== const pinCounterSpan = document.getElementById('pinCounter'); // pin scene with dynamic text update const pinScene = new ScrollMagic.Scene( triggerElement: "#scene4", triggerHook: 0, duration: "100%" // pin for the entire height of scene4 (100vh approx) ) .setPin("#scene4", pushFollowers: false ) .addTo(controller); // update pin progress percentage inside the card if(pinCounterSpan) new ScrollMagic.Scene( triggerElement: "#scene4", triggerHook: 0, duration: "100%" ) .on("progress", (e) => let percent = Math.floor(e.progress * 100); pinCounterSpan.innerText = percent + "%"; // optional: change color based on progress if(percent > 70) pinCounterSpan.style.color = "#ff3d6a"; else if(percent > 30) pinCounterSpan.style.color = "#ffbc3d"; else pinCounterSpan.style.color = "#ff6a3d"; ) .addTo(controller); // additional animation inside pinned area: scale card text while pinned const card4 = document.getElementById('card4'); if(card4) new ScrollMagic.Scene( triggerElement: "#scene4", duration: "100%", triggerHook: 0 ) .setTween(gsap.fromTo(card4.querySelector('p'), letterSpacing: "0px", filter: "blur(0px)" , letterSpacing: "2px", filter: "blur(0.6px)", duration: 1, ease: "none", yoyo: false, repeat: 1, repeatDelay: 0.2 )) .addTo(controller); // smoother: dynamic scale on pin progress new ScrollMagic.Scene( triggerElement: "#scene4", duration: "100%" ) .on("progress", (e) => const scaleVal = 1 + (e.progress * 0.1); gsap.set(card4, scale: scaleVal, transformOrigin: "center center" ); ) .addTo(controller); // ========== ADDITIONAL: global parallax on scroll? just for ambiance ========== // apply a background shift to scene2 as extra demonstration of Windows mouse performance const scene2Bg = document.querySelector('.scene-2'); if(scene2Bg) new ScrollMagic.Scene( triggerElement: "#scene2", duration: "200%", triggerHook: 0 ) .setTween(gsap.to(scene2Bg, backgroundPosition: "10% 30%", ease: "linear", duration: 2 )) .addTo(controller); // ========== Final: scroll wheel smooth behavior note ========== // To ensure that Windows mouse wheel feels crisp and no lag, ScrollMagic uses passive event listeners // Also we force a refresh on resize to avoid misalignments window.addEventListener('resize', () => controller.update(true); ); // optional small debug: remove indicators for cleaner production, but left as comment. // if you need debug indicators uncomment: // new ScrollMagic.Scene(triggerElement: "#scene4").addIndicators().addTo(controller); // little console greeting console.log("ScrollMagic master article ready )(); </script> </body> </html> scroll magic mouse windows

p font-size: 1.2rem; line-height: 1.5; font-weight: 300; color: #cdd9ff; .flex-gallery display: flex

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>ScrollMagic Masterpiece | Smooth Scroll Animations for Windows Mouse</title>  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,500;14..32,700&display=swap" rel="stylesheet"> <style> * margin: 0; padding: 0; box-sizing: border-box; .gallery-item background: #1e2432

<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>