Elastic Grid Scroll: Creating Lag-Primarily based Structure Animations with GSAP ScrollSmoother

You’ve most likely seen this type of scroll impact earlier than, even when it doesn’t have a reputation but. (Truthfully, we want a dictionary for all these bizarre internet interactions. For those who’ve bought a expertise for naming issues…do it. Critically. The web is ready.)

Think about a grid of photographs. As you scroll, the columns don’t transfer uniformly however as an alternative, the middle columns react quicker, whereas these on the perimeters path behind barely. It feels mushy, elastic, and bodily, virtually like scrolling with weight, or elasticity.

You’ll be able to see this wonderful impact on websites like yzavoku.com (and I’m positive there’s much more!).

So what higher excuse to make use of the now-free GSAP ScrollSmoother? We will recreate it simply, with nice efficiency and full management. Let’s take a look!

What We’re Constructing

We’ll take CSS grid primarily based format and add some magic:

• Inertia-based scrolling utilizing ScrollSmoother
• Per-column lag, calculated dynamically primarily based on distance from the middle
• A format that adapts to column modifications

HTML Construction

Let’s arrange the markup with figures in a grid:

<div class="grid">
  <determine class="grid__item">
    <div class="grid__item-img" type="background-image: url(property/1.webp)"></div>
    <figcaption class="grid__item-caption">Zorith - L91</figcaption>
  </determine>
  <!-- Repeat for extra objects -->
</div>

Contained in the grid, we’ve many .grid__item figures, every with a background picture and a label. These might be dynamically grouped into columns by JavaScript, primarily based on what number of columns CSS defines.

CSS Grid Setup

.grid {
  show: grid;
  grid-template-columns: repeat(var(--column-count), minmax(var(--column-size), 1fr));
  grid-column-gap: var(--c-gap);
  grid-row-gap: var(--r-gap);
}

.grid__column {
  show: flex;
  flex-direction: column;
  hole: var(--c-gap);
}

We outline all of the variables in our root.

In our JavaScript then, we’ll change the DOM construction by inserting .grid__column wrappers round teams of things, one per colum, so we will management their movement individually. Why are we doing this? It’s a bit lighter to maneuver columns moderately then every particular person merchandise.

JavaScript + GSAP ScrollSmoother

Let’s stroll by means of the logic step-by-step.

1. Allow Clean Scrolling and Lag Results

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

const smoother = ScrollSmoother.create({
  clean: 1, // Inertia depth
  results: true, // Allow per-element scroll lag
  normalizeScroll: true, // Fixes cellular inconsistencies
});

This prompts GSAP’s clean scroll layer. The results: true flag lets us animate parts with lag, no scroll listeners wanted.

2. Group Gadgets Into Columns Primarily based on CSS

const groupItemsByColumn = () => {
  const gridStyles = window.getComputedStyle(grid);
  const columnsRaw = gridStyles.getPropertyValue('grid-template-columns');

  const numColumns = columnsRaw.cut up(' ').filter(Boolean).size;

  const columns = Array.from({ size: numColumns }, () => []); // Initialize column arrays

  // Distribute grid objects into column buckets
  grid.querySelectorAll('.grid__item').forEach((merchandise, index) => {
    columns[index % numColumns].push(merchandise);
  });

  return { columns, numColumns };
};

This methodology teams your grid objects into arrays, one for every visible column, utilizing the precise variety of columns calculated from the CSS.

3. Create Column Wrappers and Assign Lag

const buildGrid = (columns, numColumns) => {

  const fragment = doc.createDocumentFragment(); // Environment friendly DOM batch insertion
  const mid = (numColumns - 1) / 2; // Middle index (will be fractional)
  const columnContainers = [];

  // Loop over every column
  columns.forEach((column, i) => {
    const distance = Math.abs(i - mid); // Distance from heart column
    const lag = baseLag + distance * lagScale; // Lag primarily based on distance from heart

    const columnContainer = doc.createElement('div'); // New column wrapper
    columnContainer.className = 'grid__column';

    // Append objects to column container
    column.forEach((merchandise) => columnContainer.appendChild(merchandise));

    fragment.appendChild(columnContainer); // Add to fragment
    columnContainers.push({ factor: columnContainer, lag }); // Save for lag impact setup
  });

  grid.appendChild(fragment); // Add all columns to DOM without delay
  return columnContainers;
};

The lag worth will increase the additional a column is from the middle, creating that elastic “catch up” really feel throughout scroll.

4. Apply Lag Results to Every Column

const applyLagEffects = (columnContainers) => {
  columnContainers.forEach(({ factor, lag }) => {
    smoother.results(factor, { velocity: 1, lag }); // Apply particular person lag per column
  });
};

ScrollSmoother handles all of the heavy lifting, we simply move the specified lag.

5. Deal with Structure on Resize

// Rebuild the format provided that the variety of columns has modified on window resize
window.addEventListener('resize', () => {
  const newColumnCount = getColumnCount();
  if (newColumnCount !== currentColumnCount) {
    init();
  }
});

This ensures our format stays right throughout breakpoints and column depend modifications (dealt with through CSS).

And that’s it!

Lengthen This Additional

Now, there’s plenty of methods to construct upon this and add extra jazz!

For instance, you may:

• add scroll-triggered opacity or scale animations
• use scroll velocity to manage results (see demo 2)
• adapt this sample for horizontal scroll layouts

Exploring Variations

After getting the core idea in place, there are 4 demo variations you’ll be able to discover. Each exhibits how totally different lag values and scroll-based interactions can affect the expertise.

You’ll be able to modify which columns reply quicker, or play with refined scaling and transforms primarily based on scroll velocity. Even small modifications can shift the rhythm and tone of the format in fascinating methods. And don’t neglect: altering the look of the grid itself, just like the picture ratio or gaps, will give this an entire totally different really feel!

Now it’s your flip. Tweak it, break it, rebuild it, and make one thing cool.

I actually hope you get pleasure from this impact! Thanks for checking by 🙂