Skip to content
SloplessTry the picker

Signature look · scroll

Parallax layers

Images and shapes in the hero and gallery sections drift at different speeds as you scroll, giving restrained depth; text never moves out of sync with its section.

Id
scroll-parallax-layers
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

  • Apply parallax only to media and shape layers (never to text or buttons), at most 3 layers per section and a maximum travel of 15% of the element's height.
  • Use ScrollTrigger with scrub: true and yPercent tweens; give each image a 115% tall wrapper so moving it never reveals an edge.
  • Prefer native CSS scroll-driven animations (animation-timeline: view()) where supported and load GSAP only as the fallback, after first paint.
  • Under prefers-reduced-motion and below 640 px, disable every parallax tween and show the layers at rest.

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

Running demo, in Art Deco

The preview renderer's stand-in for this look on the hero of a Art Deco 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

  • About
  • Contact
NNorthfold
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
Desktop
MenuN

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
Phone

Reduced-motion fallback

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

  • About
  • Contact
NNorthfold
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
Desktop, prefers-reduced-motion: reduce
MenuN

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
Phone, reduced motion

Styles it suits

Art DecoAthletic SportBauhausEditorial MagazineFrosted GlassJapanese MinimalLuxury FashionMaximalist CollageMemphisMid-Century ModernOrganic EarthScandinavian SoftSeventies PsychedelicSynthwave Retro-Future