Scroll Magic Mouse Windows May 2026

/* each scene panel */ .scene min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; will-change: transform;

/* custom scrollbar for windows (just aesthetic) */ ::-webkit-scrollbar width: 8px; ::-webkit-scrollbar-track background: #1a1e26; ::-webkit-scrollbar-thumb background: #ff6a3d; border-radius: 10px; ::-webkit-scrollbar-thumb:hover background: #ff8c5a; scroll magic mouse windows

// ========== SCENE 2: Dramatic rotation & scale + box color ========== const card2 = document.getElementById('card2'); const magicBox = document.getElementById('magicBox'); const rotateText = document.getElementById('rotateText'); // Complex timeline for scene2: card rotates, text scales, box color & scale changes const t2 = gsap.timeline(); t2.fromTo(card2, rotationY: 0, scale: 0.9, boxShadow: "0 0 0 rgba(255,106,61,0)" , rotationY: 15, scale: 1.05, boxShadow: "0 30px 40px -15px rgba(255,106,61,0.5)", duration: 0.8, ease: "power1.inOut" ); t2.fromTo(magicBox, backgroundColor: "#ff6a3d", scale: 1, borderRadius: "20px" , backgroundColor: "#ffbc3d", scale: 1.3, borderRadius: "40px", duration: 0.6, ease: "elastic.out(1, 0.4)" , 0 ); t2.fromTo(rotateText, rotation: 0, color: "#ffffff" , rotation: 5, color: "#ffb86b", duration: 0.5, ease: "back.out" , 0.2 ); new ScrollMagic.Scene( triggerElement: "#scene2", triggerHook: 0.2, duration: "70%" // animation spans 70% of scene2 height ) .setTween(t2) .addTo(controller); // additional parallax effect: move background shape? For demo we add subtle movement on badge const badge2 = document.querySelector('#scene2 .badge'); if(badge2) new ScrollMagic.Scene( triggerElement: "#scene2", duration: "100%", triggerHook: 0 ) .setTween(gsap.fromTo(badge2, x: 0, opacity: 0.6 , x: 30, opacity: 1, ease: "none", yoyo: false, repeat: -1, repeatDelay: 0 )) .addTo(controller); // But better use scroll-driven x movement relative to scroll progress: // remove previous and implement clean progress: const existing = controller.scene((s) => s.triggerElement() === "#scene2" && s); // hacky, just replace: const cleanParallax = new ScrollMagic.Scene( triggerElement: "#scene2", duration: "100%", triggerHook: 0 ) .setTween(gsap.to(badge2, x: 80, ease: "linear", scrollTrigger: false )) .addTo(controller); /* each scene panel */

footer text-align: center; padding: 2rem; font-size: 0.85rem; background: #05070a; color: #6c7a91; ::-webkit-scrollbar-track background: #1a1e26

/* fixed navigation indicator */ .progress-container position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 106, 61, 0.2); z-index: 100; .progress-bar height: 4px; background: #ff6a3d; width: 0%; box-shadow: 0 0 8px #ff6a3d; transition: width 0.08s linear;

<script> (function() !gsap) console.warn("Libraries not loaded"); return;