motion-system

Motion System Reference

Table of Contents

1. GSAP Setup & CDN
2. Pattern 1: Multi-Layer Parallax
3. Pattern 2: Pinned Sticky Sections
4. Pattern 3: Cascading Card Stack
5. Pattern 4: Scrub Timeline
6. Pattern 5: Clip-Path Wipe Reveals
7. Pattern 6: Horizontal Scroll Conversion
8. Pattern 7: Perspective Zoom Fly-Through
9. Pattern 8: Snap-to-Section
10. Lenis Smooth Scroll
11. IntersectionObserver Activation

---

GSAP Setup & CDN {#gsap-setup}

Always load from jsDelivr CDN:

<!-- Core GSAP -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<!-- ScrollTrigger plugin — required for all scroll patterns -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<!-- ScrollSmoother — optional, pairs with ScrollTrigger -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollSmoother.min.js"></script>
<!-- Flip plugin — for cross-section element morphing -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Flip.min.js"></script>
<!-- MotionPathPlugin — for curved element paths -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/MotionPathPlugin.min.js"></script>

<script>
  // Always register plugins immediately
  gsap.registerPlugin(ScrollTrigger, Flip, MotionPathPlugin);

  // Respect prefers-reduced-motion
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (prefersReduced) {
    gsap.globalTimeline.timeScale(0); // Freeze all animations
  }
</script>

---

Pattern 1: Multi-Layer Parallax {#pattern-1}

The foundation of all 2.5D depth. Different layers scroll at different speeds.

function initParallax() {
  const layers = document.querySelectorAll('[data-depth]');

  const depthFactors = {
    '0': 0.10, '1': 0.25, '2': 0.50,
    '3': 0.80, '4': 1.00, '5': 1.20
  };

  layers.forEach(layer => {
    const depth = layer.dataset.depth;
    const factor = depthFactors[depth] || 1.0;

    gsap.to(layer, {
      yPercent: -15 * factor,  // adjust multiplier for desired effect intensity
      ease: 'none',
      scrollTrigger: {
        trigger: layer.closest('.scene'),
        start: 'top bottom',
        end: 'bottom top',
        scrub: true, // 1:1 scroll-to-animation
      }
    });
  });
}