Scroll Magic Mouse Windows |link| Direct

/* ensure scenes look distinct */ .scene-1 background: radial-gradient(circle at 20% 30%, #10131c, #030507); .scene-2 background: radial-gradient(circle at 80% 70%, #121824, #020408); .scene-3 background: radial-gradient(circle at 40% 50%, #0f1420, #010101); .scene-4 background: radial-gradient(circle at 70% 20%, #1a142b, #02010a);

.animated-box width: 100px; height: 100px; background: #ff6a3d; margin: 1.5rem auto 0; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(255,106,61,0.4); scroll magic mouse windows

@media (max-width: 700px) h1 font-size: 2.8rem; h2 font-size: 1.8rem; .card padding: 1.8rem; </style> </head> <body> /* ensure scenes look distinct */

<footer> ScrollMagic + GSAP | Optimized for Windows Mouse & Trackpad | Full article demonstration </footer> .scene-2 background: radial-gradient(circle at 80% 70%

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>