Motion demo · NormCyber · 2024 · GSAP 3.12.5 + ScrollTrigger

The scroll-stack I built for NormCyber

NormCyber has since redesigned their site, so this motion is no longer live there. This page runs the original ScrollTrigger code from my 2024 build on placeholder content. The motion is the same, the client's content is not.

Each block pins to the viewport and the next one stacks over it, like a deck of cards.

Scroll ↓

On the live build the pinning deliberately stepped aside on phones, and it does here too. Open this page on a desktop to see it.

block: super-hero Each block pins to the top of the screen. 01 / 04

block: fifty-fifty The next one slides up and stacks over it. 02 / 04

block: grid-large-cards No page builder. A custom theme, compiled with webpack. 03 / 04

block: notice-banner · coral token Then the page carries on as normal. 04 / 04

The code behind it

This is the logic from the theme's block-scroll.js. Short blocks pin from the top, and tall blocks pin once their bottom edge reaches the viewport, so nothing gets cut off. The only change here is that the original's jQuery overflow toggles are plain DOM calls.

panels.forEach((panel) => {
  ScrollTrigger.create({
    trigger: panel,
    start: () =>
      panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
    pin: true,
    pinSpacing: false,
  });
});

The full write-up of the build is on the NormCyber case study.