footer text-align: center; padding: 2rem; font-size: 0.85rem; background: #05070a; color: #6c7a91;
@media (max-width: 700px) h1 font-size: 2.8rem; h2 font-size: 1.8rem; .card padding: 1.8rem; </style> </head> <body> scroll magic mouse windows
p font-size: 1.2rem; line-height: 1.5; font-weight: 300; color: #cdd9ff; footer text-align: center; padding: 2rem; font-size: 0
// ========== 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); footer text-align: center
/* each scene panel */ .scene min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; will-change: transform;
<div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div>
<!-- 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>