Skip to content
DocumentationExamples
← All components
MODULE 08

Scroll Swap

A sticky visual tracks the adjacent story. Mobile shows each illustration inline.

Open demo ↗
01 / THE PROCESS

Discover

Understand the story you want to tell.

02 / THE PROCESS

Build

Turn your ideas into flexible page sections.

03 / THE PROCESS

Grow

Keep adding to a consistent design system.

HTML source & reuse instructions

Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references. 


<div class="lab-scroll" data-lab-scroll="">
<div class="lab-scroll-visual">
<div data-scroll-panel="0">
<div aria-label="Illustrative website layout: Discover" class="lab-art art-0" role="img">
<div class="art-window">
<div class="art-dots">
            ● ● ●
           </div>
<div class="art-layout">
<div>
<small>
              MAKE SOMETHING GREAT
             </small>
<strong>
              Discover
             </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
<div data-scroll-panel="1" hidden="">
<div aria-label="Illustrative website layout: Build" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
            ● ● ●
           </div>
<div class="art-layout">
<div>
<small>
              MAKE SOMETHING GREAT
             </small>
<strong>
              Build
             </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
<div data-scroll-panel="2" hidden="">
<div aria-label="Illustrative website layout: Grow" class="lab-art art-2" role="img">
<div class="art-window">
<div class="art-dots">
            ● ● ●
           </div>
<div class="art-layout">
<div>
<small>
              MAKE SOMETHING GREAT
             </small>
<strong>
              Grow
             </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<article class="lab-scroll-step" data-scroll-step="0">
<span class="eyebrow">
          01 / THE PROCESS
         </span>
<h3 class="display-6">
          Discover
         </h3>
<p>
          Understand the story you want to tell.
         </p>
<div class="lab-scroll-mobile">
<div aria-label="Illustrative website layout: Discover" class="lab-art art-0" role="img">
<div class="art-window">
<div class="art-dots">
             ● ● ●
            </div>
<div class="art-layout">
<div>
<small>
               MAKE SOMETHING GREAT
              </small>
<strong>
               Discover
              </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</article>
<article class="lab-scroll-step" data-scroll-step="1">
<span class="eyebrow">
          02 / THE PROCESS
         </span>
<h3 class="display-6">
          Build
         </h3>
<p>
          Turn your ideas into flexible page sections.
         </p>
<div class="lab-scroll-mobile">
<div aria-label="Illustrative website layout: Build" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
             ● ● ●
            </div>
<div class="art-layout">
<div>
<small>
               MAKE SOMETHING GREAT
              </small>
<strong>
               Build
              </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</article>
<article class="lab-scroll-step" data-scroll-step="2">
<span class="eyebrow">
          03 / THE PROCESS
         </span>
<h3 class="display-6">
          Grow
         </h3>
<p>
          Keep adding to a consistent design system.
         </p>
<div class="lab-scroll-mobile">
<div aria-label="Illustrative website layout: Grow" class="lab-art art-2" role="img">
<div class="art-window">
<div class="art-dots">
             ● ● ●
            </div>
<div class="art-layout">
<div>
<small>
               MAKE SOMETHING GREAT
              </small>
<strong>
               Grow
              </strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>