Sticky Grid Scroll: Constructing a Scroll-Pushed Animated Grid

This animation was born from a venture I labored on for Max & Tiber. The preliminary concept was easy: create a dwelling, structured picture grid, guided totally by the scroll.

Slightly than piling on results, the main focus was on rhythm, spacing, and development. A set scene. Scroll as the driving force. A composition that unfolds steadily, step-by-step.

However past the visible outcome, this venture grew to become an exploration of construction: how scroll could be mapped to time, how animation phases could be orchestrated, and the way format and movement could be designed collectively as a single system.

Technically, the animation depends on GSAP, ScrollTrigger, and Lenis.

On this tutorial, we are going to break down the animation step-by-step. From format construction to timeline orchestration, together with how clean scrolling integrates into the system.

The aim is to not reproduce the impact precisely, however to know an method: how one can construct a structured, readable, and managed scroll-driven animation.

What We’re Constructing

We’ll construct a scroll-driven animation based mostly on a minimal construction:

• A sticky block, used as a hard and fast scene
• A 12-image grid, organized in columns
• A essential timeline, orchestrating a number of inside timelines

Every half has a transparent position:

• The sticky block defines the visible stage
• The grid gives the animated materials
• The timeline coordinates how all the things evolves

Collectively, they kind a managed setting the place movement could be exactly structured.

How Scroll Maps to Animation

Earlier than diving into the construction, you will need to perceive how the animation pertains to scroll.

The sticky part behaves like a hard and fast stage. Scrolling doesn’t transfer the scene, it advances time inside it. Because the person scrolls, the animation progresses by means of distinct phases:

Scroll progress → Visible state

0% – 45%   Grid enters the scene (column reveal)
45% – 90%  Grid expands and opens house (zoom and offsets)
90% – 95%  Content material settles into focus (textual content and button seem)
95% – 100% Scene stabilizes

Every part corresponds to a section of the principle timeline. Scroll place determines how far that timeline has progressed. As soon as this mannequin is obvious, the animation turns into a composition of states fairly than a set of results.

Now that the animation logic is outlined, we will construct the structural basis that helps it.

HTML Construction

The animation is constructed on a intentionally easy HTML construction. Every ingredient has a transparent position, making each format and animation simpler to cause about. The primary animated block sits between common content material sections, making a pure scroll movement earlier than and after the sequence.

  

    

      
Sticky Grid Scroll
      
...
      ...
    
    

      

        

          
        
        
      
    
  

Two distinct zones construction the scene:

• The textual content content material, centered within the viewport
• The gallery, which gives the visible materials for the animation

The .block acts because the scroll container. Its prolonged top creates the temporal house wanted for the animation to unfold.

Inside it, .block__wrapper is sticky. This kinds the fastened scene the place the animation performs out whereas the person scrolls.

The .content material is separated from the gallery. This makes it potential to regulate its place, visibility, and interplay independently from the grid.

Lastly, the .gallery is constructed as an inventory. Every picture is a person merchandise, which makes concentrating on and animating components simple and predictable.

This easy hierarchy is intentional. It retains the format readable, isolates tasks, and gives a clear basis for constructing the animation timelines.

CSS Setup

CSS defines the visible house earlier than any animation occurs. It establishes proportions, positioning, and structural stability. The aim right here just isn’t ornamental styling, however preparation, constructing a strong, predictable setting the place movement can later unfold with management.

1. Fluid rem

The format makes use of a fluid rem system based mostly on the viewport width.

html {
  font-size: calc(100vw / 1440);
}

physique {
  font-size: 16rem;
}

At a width of 1440px, 1rem equals 1px. Above or under that width, the whole interface scales proportionally. This method gives a number of advantages:

• Direct consistency between design and implementation
• Pure scaling with out complicated media queries
• Exact management over spacing and sizes

It’s a easy however deliberate technique. Every part scales collectively, preserving visible relationships throughout display screen sizes whereas conserving the format absolutely responsive

2. Primary Block and Sticky Wrapper

The primary block is deliberately very tall. It creates the temporal house required for the animation to unfold.

.block.block--main {
  top: 425vh;
}

.block__wrapper {
  place: sticky;
  prime: 0;
  padding: 0 24rem;
  overflow: hidden;
}

The top: 425vh just isn’t arbitrary. It’s adjusted to match the variety of animation phases and their rhythm. The .block__wrapper stays pinned to the highest of the viewport, forming the fastened scene the place all the things occurs. overflow: hidden ensures visible cleanliness by masking components as they enter or go away the body.

3. Centered Content material

The textual content content material is centered within the viewport and acts as a visible anchor.

.content material {
  place: relative;
  show: flex;
  flex-direction: column;
  justify-content: middle;
  align-items: middle;
  width: 100%;
  top: 100vh;
  text-align: middle;
  z-index: 1;
}

The place and the z-index preserve it above the grid, guaranteeing readability even whereas the gallery strikes and transforms behind it. The content material stays secure, movement occurs round it.

4. The gallery

The gallery is positioned on the middle of the scene. It gives the visible materials that can later be animated.

.gallery {
  place: absolute;
  prime: 50%;
  left: 50%;
  rework: translate3d(-50%, -50%, 0);
  width: 736rem;
}

The grid itself is structured into three columns.

.gallery__grid {
  show: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32rem;
  row-gap: 40rem;
}

Every merchandise is completely sq. due to aspect-ratio.

.gallery__item {
  width: 100%;
  aspect-ratio: 1;
}

Every picture fills its container with out distortion.

.gallery__image {
  width: 100%;
  top: 100%;
  object-fit: cowl;
}

This grid is deliberately common. It gives a secure, nearly impartial base. Motion will later disturb this regularity in a managed means.

JavaScript + GSAP + Lenis

This animation is totally scroll-driven. JavaScript is used right here to orchestrate motion, to not overwhelm it. The method depends on three components:

• GSAP, for exact movement
• ScrollTrigger, to bind animations to scroll
• Lenis, to realize clean and secure scrolling

Every part is structured round a single class. One scene. One accountability. One orchestration layer.

1. Import and Register Plugins

We begin by importing the required dependencies.

import Lenis from "lenis"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { preloadImages } from "./utils.js"

Then, we register the ScrollTrigger plugin.

gsap.registerPlugin(ScrollTrigger)

2. Initialize Lenis for Clean Scrolling

Lenis is used to clean out scrolling. The aim is to not rework the expertise, however to make it extra secure.

// Initialize clean scrolling utilizing Lenis and synchronize it with GSAP ScrollTrigger
operate initSmoothScrolling() {
  // Create a brand new Lenis occasion for clean scrolling
  const lenis = new Lenis({
    lerp: 0.08,
    wheelMultiplier: 1.4,
  })
  
  // Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
  lenis.on("scroll", ScrollTrigger.replace)
  
  // Add Lenis's requestAnimationFrame (raf) methodology to GSAP's ticker
  // This ensures Lenis's clean scroll animation updates on every GSAP tick
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000) // Convert time from seconds to milliseconds
  })
  
  // Disable lag smoothing in GSAP to forestall any delay in scroll animations
  gsap.ticker.lagSmoothing(0)
}

Scrolling turns into extra fluid, with out extreme inertia. Every motion stays tightly synchronized with the GSAP timelines. Right here, Lenis serves precision. It helps stop micro stutters and reinforces a way of continuity.

3. World Initialization

Earlier than diving into the category itself, we arrange the worldwide initialization.

// Preload pictures then initialize all the things
preloadImages().then(() => {
  doc.physique.classList.take away("loading") // Take away loading state from physique
  initSmoothScrolling() // Initialize clean scrolling
  new StickyGridScroll() // Initialize grid animation
})

Pictures are preloaded. Clean scrolling is initialized. The scene can then be instantiated.

4. Class Construction

Your complete animation is encapsulated inside a single class: StickyGridScroll. This class has one clear goal: to orchestrate the weather and their animations inside the principle block.

class StickyGridScroll {
  constructor() {
    this.getElements()
    
    this.initContent()
    this.groupItemsByColumn()
    
    this.addParallaxOnScroll()
    this.animateTitleOnScroll()
    this.animateGridOnScroll()
  }
}

The constructor is deliberately readable. Every methodology maps to a particular accountability:

• Retrieving components
• Making ready the preliminary state
• Organizing the grid
• Declaring the animations

We’ll now stroll by means of these steps, one after the other.

5. Retrieving Parts

Earlier than any animation takes place, we isolate the weather we want. Nothing is animated “on the fly”. Every part is ready.

/**
 * Choose and retailer the DOM components wanted for the animation
 * @returns {void}
 */
getElements() {
  this.block = doc.querySelector(".block--main")
  
  if (this.block) {
    this.wrapper = this.block.querySelector(".block__wrapper")
    this.content material = this.block.querySelector(".content material")
    this.title = this.block.querySelector(".content__title")
    this.description = this.block.querySelector(".content__description")
    this.button = this.block.querySelector(".content__button")
    this.grid = this.block.querySelector(".gallery__grid")
    this.objects = this.block.querySelectorAll(".gallery__item")
  }
}

This method affords a number of advantages:

• The code stays readable
• Animations are simpler to keep up
• DOM references are usually not recalculated unnecessarily

At this level, all required components can be found. We will now put together their preliminary state earlier than introducing movement.

6. Making ready the Content material

Earlier than triggering any motion, the content material must be positioned appropriately. The concept is easy: begin from a impartial, managed state.

Hiding the Description and Button

The outline and the button shouldn’t seem instantly. They are going to be revealed later, as soon as the grid has settled into place. Interactions are additionally disabled. The content material exists within the DOM, however stays silent.

/**
 * Initializes the visible state of the content material earlier than animations
 * @returns {void}
 */
initContent() {
  if (this.description && this.button) {
    // Conceal description and button
    gsap.set([this.description, this.button], { 
	    opacity: 0, 
	    pointerEvents: "none" 
    })
  }
  
  // ...
}

Dynamically Centering the Title

The title, however, must be visually centered throughout the viewport. Slightly than counting on a hard and fast worth, we calculate its offset dynamically.

/**
 * Initializes the visible state of the content material earlier than animations
 * @returns {void}
 */
initContent() {
  // ... 
  
  if (this.content material && this.title) {
    // Calculate what number of pixels are wanted to vertically middle the title inside its container
    const dy = (this.content material.offsetHeight - this.title.offsetHeight) / 2
    // Convert this pixel offset right into a proportion of the container top
    this.titleOffsetY = (dy / this.content material.offsetHeight) * 100
    // Apply the vertical positioning utilizing percent-based rework
    gsap.set(this.title, { yPercent: this.titleOffsetY })
  }
}

The logic is simple:

• Measure the obtainable house across the title
• Decide the offset required to middle it vertically
• Convert that offset right into a proportion

This selection issues. Through the use of yPercent as an alternative of pixels, the positioning stays fluid and resilient.

At this stage, the title is centered, the outline and button are hidden. The scene is prepared. All that’s left is to arrange the visible materials: the grid.

7. Grouping Objects into Columns

The grid is made up of 12 pictures. To create extra nuanced and diversified animations, we set up them into three columns. This grouping kinds the muse for all the things that follows. It prepares the scene for the principle timeline, which is able to orchestrate the reveal, the zoom, and the content material toggle.

/**
 * Group grid objects into a hard and fast variety of columns
 * @returns {void}
 */
groupItemsByColumn() {
  this.numColumns = 3
  // Initialize an array for every column
  this.columns = Array.from({ size: this.numColumns }, () => [])
  // Distribute grid objects into column buckets
  this.objects.forEach((merchandise, index) => {
      this.columns[index % this.numColumns].push(merchandise)
  })
}

8. The Animations

All animations are pushed by GSAP and ScrollTrigger. Scroll turns into a steady timeline, and every inside timeline contributes to the visible development.

We’ll break down every step, beginning with the principle timeline, which acts because the structural spine of the whole sequence.

Primary Timeline (Scroll-Pushed)

The primary timeline is the center of the scene. It’s chargeable for:

• Orchestrating the grid reveal
• Driving the zoom
• Synchronizing the looks of the textual content content material

/**
 * Animate the grid based mostly on scroll place
 * Combines grid reveal, grid zoom, and content material toggle in a scroll-driven timeline
 *
 * @returns {void}
 */
animateGridOnScroll() {
  // Create a scroll-driven timeline
  const timeline = gsap.timeline({
    scrollTrigger: {
      set off: this.block,
      begin: "prime 25%", // Begin when prime of block hits 25% of viewport
      finish: "backside backside", // Finish when backside of block hits backside of viewport
      scrub: true, // Clean animation based mostly on scroll place
    },
  })
  
  timeline
    // Add grid reveal animation
    .add(this.gridRevealTimeline())
    // Add grid zoom animation, overlapping earlier animation by 0.6 seconds
    .add(this.gridZoomTimeline(), "-=0.6")
    // Toggle content material visibility based mostly on scroll course, overlapping earlier animation by 0.32 seconds
    .add(() => this.toggleContent(timeline.scrollTrigger.course === 1), "-=0.32")
}

Why This Timeline Issues?

• It centralizes all animations
• It defines the period and rhythm of the scroll
• It creates rigorously timed overlaps, conserving movement pure
• Inner timelines (reveal, zoom, toggle) turn out to be modular constructing blocks.

That is the principle rating.

Grid Reveal Timeline

Every column of the grid is revealed from the highest or backside, with a delicate stagger.

• Even columns animate from the highest
• Odd columns animate from the underside
• The space is calculated dynamically based mostly on the viewport top

This step creates the primary noticeable motion, because the grid unfolds easily into the scene.

/**
 * Create a GSAP timeline to disclose the grid objects with vertical animation
 * Every column strikes from prime or backside, with staggered timing
 *
 * @param {Array} columns - Array of columns, every containing DOM components of the grid
 * @returns {gsap.core.Timeline} - The timeline for the grid reveal animation
 */
gridRevealTimeline(columns = this.columns) {
  // Create a timeline
  const timeline = gsap.timeline()
  const wh = window.innerHeight
  // Calculate the gap to begin grid absolutely exterior the viewport (above or under)
  const dy = wh - (wh - this.grid.offsetHeight) / 2
  
  columns.forEach((column, colIndex) => {
    // Decide the course: columns with even index transfer from prime, odd from backside
    const fromTop = colIndex % 2 === 0
    
    // Animate all objects within the column
    timeline.from(column, {
	  y: dy * (fromTop ? -1 : 1), // Begin above or under the viewport based mostly on column index
	  stagger: {
        every: 0.06, // Stagger the animation throughout the column: 60ms between every merchandise's animation
        from: fromTop ? "finish" : "begin", // Animate from backside if shifting down, prime if shifting up
	  },
	  ease: "power1.inOut",
    }, "grid-reveal") // Label to synchronize animations throughout columns
  })
  
  return timeline
}

Grid Zoom Timeline

The zoom enhances the visible dynamics:

• Your complete grid is barely enlarged (scale: 2.05)
• The facet columns transfer horizontally outward
• Objects within the central column shift vertically

This opening impact provides depth to the scene and permits the content material to breathe.

/**
 * Create a GSAP timeline to zoom the grid
 * Lateral columns transfer horizontally, central column objects transfer vertically
 *
 * @param {Array} columns - Array of columns, every containing DOM components of the grid
 * @returns {gsap.core.Timeline} - The timeline for the grid zoom animation
 */
gridZoomTimeline(columns = this.columns) {
  // Create a timeline with default period and easing for all tweens
  const timeline = gsap.timeline({ defaults: { period: 1, ease: "power3.inOut" } })
  
  // Zoom the whole grid
  timeline.to(this.grid, { scale: 2.05 })
  
  // Transfer lateral columns horizontally
  timeline.to(columns[0], { xPercent: -40 }, "<") // Left column strikes left
  timeline.to(columns[2], { xPercent: 40 }, "<") // Proper column strikes proper
  
  // Animate central column vertically
  timeline.to(columns[1], {
	// Objects above the midpoint transfer up, under transfer down
	yPercent: (index) => (index < Math.flooring(columns[1].size / 2) ? -1 : 1) * 40,
	period: 0.5,
	ease: "power1.inOut",
  }, "-=0.5") // Begin barely earlier than earlier animation ends for overlap
  
  return timeline
}

Toggle Content material

The primary timeline determines when the textual content content material seems:

• The title slides into its ultimate place
• The outline and button turn out to be seen and interactive
• The animation is delicate, deliberate, and clean

Content material doesn’t seem arbitrarily, it emerges when house has been created for it.

/**
 * Toggle the visibility of content material components (title, description, button) with animations
 *
 * @param {boolean} isVisible - Whether or not the content material must be seen
 * @returns {void}
 */
toggleContent(isVisible = true) {
  if (!this.title || !this.description || !this.button) {
    return
  }
  
  // Create a timeline
  gsap.timeline({ defaults: { overwrite: true } })
    // Animate the title's vertical place
    .to(this.title, {
      yPercent: isVisible ? 0 : this.titleOffsetY, // Slide up or return to preliminary offset
      period: 0.7,
      ease: "power2.inOut",
    })
    // Animate description and button opacity and pointer occasions
    .to([this.description, this.button], {
      opacity: isVisible ? 1 : 0,
      period: 0.4,
      ease: `power1.${isVisible ? "inOut" : "out"}`,
      pointerEvents: isVisible ? "all" : "none",
    }, isVisible ? "-=90%" : "<") // Overlap with earlier tween when displaying
}

Add Parallax On Scroll

The wrapper undergoes a slight vertical shift, creating the phantasm of fastened content material.

/**
 * Apply a parallax impact to the wrapper when scrolling
 * @returns {void}
 */
addParallaxOnScroll() {
  if (!this.block || !this.wrapper) {
    return
  }
  
  // Create a scroll-driven timeline
  // Animate the wrapper vertically based mostly on scroll place
  gsap.from(this.wrapper, {
    yPercent: -100,
    ease: "none",
    scrollTrigger: {
      set off: this.block,
      begin: "prime backside", // Begin when prime of block hits backside of viewport
      finish: "prime prime", // Finish when prime of block hits prime of viewport
      scrub: true, // Clean animation based mostly on scroll place
    },
  })
}

Animate Title On Scroll

Lastly, the title receives a delicate fade-in:

• It turns into seen on the key second within the timeline
• The reader’s gaze is of course guided to the content material
• The sequence feels full and coherent

/**
 * Animate the title ingredient when the block scrolls into view
 * @returns {void}
 */
animateTitleOnScroll() {
  if (!this.block || !this.title) {
    return
  }
  
  // Create a scroll-driven timeline
  // Animate the title's opacity when the block reaches 57% of the viewport top
  gsap.from(this.title, {
    opacity: 0,
    period: 0.7,
    ease: "power1.out",
    scrollTrigger: {
      set off: this.block,
      begin: "prime 57%", // Begin when prime of block hits 57% of viewport
      toggleActions: "play none none reset", // Play on enter, reset on go away again
    },
  })
}

Now, all animations are orchestrated. Scroll turns into the driving force, and the scene unfolds in a fluid, managed, and chic method.

And That’s It

This animation demonstrates how scroll can turn out to be a software for visible storytelling. Each motion and transition is designed to be clear, fluid, and structured.

Behind the impact lies a easy however highly effective method: a minimal HTML construction, a secure CSS format, and a essential timeline orchestrating movement with precision. Every animation acts as a constructing block, assembled right into a coherent development.

Extra importantly, this method is designed to scale. You possibly can regulate the rhythm, exchange the format, introduce new animation phases, or reorganize the timeline totally, whereas conserving the identical underlying logic.

Now, it’s your flip. Experiment, differ the rhythms, enrich the composition. All the time bear in mind precision, readability, and class.

I sincerely hope you’ll get pleasure from this impact and discover it inspiring. Thanks for taking the time to learn this tutorial. I might be delighted to listen to your suggestions. You possibly can attain me out through Instagram, LinkedIn, or e mail.