Skip to content
SloplessTry the picker

Signature look · scroll

Pinned scroll story

One section pins to the viewport while the user scrolls through 3–5 steps: copy changes on one side while a media panel cross-fades or transforms on the other. The rest of the page scrolls normally.

Id
scroll-pinned-story
Cost
about 45 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Pin exactly one section (a features, list or content block from layout.json, never the hero or footer) with ScrollTrigger, for 3–5 steps and at most 300vh of scroll.
  • Drive one scrubbed timeline (scrub 0.5–1) that swaps the step copy and transforms the media panel; animate only transform and opacity.
  • Write the section so it reads correctly with no JavaScript: all steps visible in normal flow; JS enhances that markup into the pinned version.
  • With gsap.matchMedia(), only pin at min-width 768px and when prefers-reduced-motion is no-preference; otherwise leave the steps stacked and static.
  • Lazy-load GSAP and ScrollTrigger when the section approaches the viewport (IntersectionObserver with a 50% rootMargin), and call ScrollTrigger.refresh() after fonts and images load.

Required skills (the agent asks before installing, per project)

gsap-core
Official GSAP core API: tweens, easing, stagger, matchMedia for prefers-reduced-motion. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-core
gsap-scrolltrigger
Official GSAP ScrollTrigger: pinned sections, scrubbed timelines and parallax. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-scrolltrigger
gsap-timeline
Official GSAP timelines: sequencing, position parameter and playback control. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-timeline

Running demo, in Athletic Sport

The preview renderer's stand-in for this look on the hero of a Athletic Sport design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

Northfold
  • About
  • Contact
Start a project

06

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

Northfold
  • About
  • Contact
Start a project

06

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone, reduced motion

Styles it suits

Athletic SportBento TechBroadsheet NewspaperClassical BookishConstructivistEditorial MagazineLuxury FashionNeo-grotesk MinimalSwiss International