Scroll highlight

Introduction

The Scroll highlight example shows how to create a dynamic skill showcase where items highlight as the user scrolls through the page. This creates an elegant reading experience that draws attention to each item as it moves through a specific viewport region.

This tutorial uses the inView function from Motion to detect when elements enter a custom scroll zone, then applies CSS classes to highlight the active item.

Get started

Let's start with the HTML structure and base styles:

<div class="container">
    <h1>Skills</h1>
    <div class="skills-list">
        <div class="skill-item">Branding</div>
        <div class="skill-item">Web Design</div>
        <div class="skill-item">Marketing</div>
        <div class="skill-item">UI/UX Design</div>
        <div class="skill-item">Development</div>
        <div class="skill-item">Motion Design</div>
    </div>
</div>

<style>
    /** Copy styles from example source code */
</style>

The key design elements here are the sticky rotated heading that stays fixed while scrolling, and the skill items that start at 30% opacity. The .active class will be applied dynamically to highlight items as they enter the scroll zone.