Elastic Grid Scroll: Creating Lag-Based mostly Structure Animations with GSAP ScrollSmoother

You’ve in all probability seen this sort of scroll impact earlier than, even when it doesn’t have a reputation but. (Truthfully, we want a dictionary for all these strange internet interactions. In case you’ve obtained a expertise for naming issues…do it. Critically. The web is ready.)

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

You possibly can see this superb impact on websites like yzavoku.com (and I’m certain there’s much more!).

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

What We’re Constructing

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

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

HTML Construction

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

Contained in the grid, we have now many .grid__item figures, every with a background picture and a label. These shall be dynamically grouped into columns by JavaScript, based mostly 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 are able to management their movement individually. Why are we doing this? It’s a bit lighter to maneuver columns somewhat then every particular person merchandise.

JavaScript + GSAP ScrollSmoother

Let’s stroll via the logic step-by-step.

1. Allow Easy 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 components with lag, no scroll listeners wanted.

2. Group Objects Into Columns Based mostly 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; // Heart index (may 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 based mostly 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({ aspect: columnContainer, lag }); // Save for lag impact setup
  });

  grid.appendChild(fragment); // Add all columns to DOM directly
  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(({ aspect, lag }) => {
    smoother.results(aspect, { 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 rely adjustments (dealt with by way of CSS).

And that’s it!

Prolong This Additional

Now, there’s numerous 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 may discover. Every one reveals how completely different lag values and scroll-based interactions can affect the expertise.

You possibly can regulate which columns reply quicker, or play with delicate scaling and transforms based mostly on scroll velocity. Even small adjustments can shift the rhythm and tone of the format in attention-grabbing methods. And don’t neglect: altering the look of the grid itself, just like the picture ratio or gaps, will give this a complete completely 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 🙂