Quick Start

HTML
<!-- Lightweight Rellax.js implementation -->
<div class="scroll-story">
  <section class="hero" data-rellax-speed="-7">
    <h1>The Problem</h1>
  </section>
  <section class="solution pinned" data-rellax-speed="-3">
    <div class="content">Our Solution</div>
  </section>
  <section class="proof" data-rellax-speed="-1">
    <div class="testimonials"></div>
  </section>
</div>

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  var rellax = new Rellax('.scroll-story [data-rellax-speed]');
</script>

SCROLL-STORY Framework Workflow

Progress:

• Map narrative arc (Problem → Solution → Proof → CTA)
• Design parallax depth layers (background -7 to -9, midground -3 to -5, foreground -1 to -2)
• Create pin sections for feature reveals
• Add horizontal scroll zones for comparisons
• Implement scroll progress indicator
• Test for anti-patterns

CSS
.story-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.problem { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.solution { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.proof { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.cta { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

• Background: -7 to -9 speed (slow, atmospheric)
• Midground: -3 to -5 speed (moderate, content containers)
• Foreground: -1 to -2 speed (fast, UI elements)

JavaScript
// GSAP ScrollTrigger implementation
gsap.registerPlugin(ScrollTrigger);

gsap.to(".bg-layer", {
  yPercent: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".story-container",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

JavaScript
ScrollTrigger.create({
  trigger: ".feature-section",
  start: "top top",
  end: "+=300%",
  pin: true,
  scrub: 1,
  animation: gsap.timeline()
    .to(".feature-1", {opacity: 1, y: 0})
    .to(".feature-2", {opacity: 1, y: 0})
    .to(".feature-3", {opacity: 1, y: 0})
});

CSS
.horizontal-section {
  overflow-x: hidden;
  width: 100vw;
}

.horizontal-content {
  display: flex;
  width: 400%; /* 4 panels */
  will-change: transform;
}

JavaScript
gsap.to(".horizontal-content", {
  xPercent: -75,
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-section",
    start: "top top",
    end: "+=200%",
    pin: true,
    scrub: 1
  }
});

CSS
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  z-index: 100;
  transition: width 0.1s ease;
}

JavaScript
ScrollTrigger.create({
  trigger: "body",
  start: "top top",
  end: "bottom bottom",
  onUpdate: self => {
    gsap.to(".progress-bar", {
      width: (self.progress * 100) + "%",
      duration: 0.1
    });
  }
});

Examples

Example 1: SaaS Product Landing Input: Software that reduces meeting time Output:

• Problem: Endless meeting hell (dark parallax)
• Solution: Smart scheduling (bright reveal)
• Proof: "80% time saved" counter animation
• CTA: Free trial button with hover parallax

Example 2: E-commerce Product Input: Sustainable fashion brand Output:

• Problem: Fast fashion waste (parallax fabric textures)
• Solution: Ethical production (pinned garment reveals)
• Proof: Horizontal scroll customer stories
• CTA: Shop collection with progress indicator

Best Practices

• Performance: Use will-change: transform on animated elements
• Mobile: Disable parallax on touch devices: if (!window.DeviceMotionEvent)
• Accessibility: Respect prefers-reduced-motion media query
• Loading: Implement skeleton screens for smooth initial render
• SEO: Ensure content is accessible without JavaScript

CSS
@media (prefers-reduced-motion: reduce) {
  .parallax-element {
    transform: none !important;
  }
}

Common Pitfalls

❌ Excessive parallax speeds (>10): Causes motion sickness ❌ Scroll-jacking: Never disable native scroll behavior ❌ Missing fallbacks: Always provide non-JS version ❌ Ignoring mobile: Heavy animations drain battery ❌ Too many layers: Keep parallax elements under 5 per section ❌ Inconsistent easing: Stick to ease-out or none for scroll ❌ No loading states: Users see broken layout during asset loading

Library Selection

Rellax.js (2KB): Simple parallax, good for basic effects GSAP ScrollTrigger (15KB): Full control, complex animations, better performance

Choose GSAP for:

• Complex timeline animations
• Horizontal scrolling
• Advanced easing/morphing
• Professional projects with budget

Choose Rellax for:

• Simple parallax only
• Tight performance budgets
• Quick prototypes