FX-010 · Horizontal Track
Horizontal scroll for websites.
Scrolling down slides a row of scenes sideways, pinned in place until the last one has come through, then the page carries on. With a mouse, the row can be grabbed and thrown.
- Weight2.4 KB
- LibraryGSAP
- PhonesStacked
- Licence€39
Live · Pin
The page holds still.
You just switched into it: the page stopped going down and started going sideways. Keep scrolling, or grab the row and throw it.
On phones the effect stacks its scenes, and this site swipes instead. Open this page on a laptop to drive the row.
Live · Slide
One pixel, one pixel.
A pixel of scroll is a pixel of travel, so it feels direct.
Live · Throw
Grab it. Let go.
Drag with a mouse or pen, and the row glides on with the speed of the throw.
Live · Release
Then it carries on.
When the last scene is through, the page goes back to scrolling down. This row ends at the licence.
01 — Details
What it does.
Pinned, then released
The section holds the screen until the last scene has come through, then normal scrolling resumes.
Grab and throw
With a mouse or pen, the row follows the pointer pixel for pixel and glides on after release. Touch keeps its native swipe.
Clicks stay safe
A drag starts only after a few pixels, and a drag that ends on a link or button never clicks it.
Effects inside follow it
Anything animated inside the row fires as it slides in, not as the page scrolls past.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a pinned horizontal scroll section for this website with GSAP and ScrollTrigger. Behaviour - Scrolling down slides a row of scenes from right to left, pinned until the last scene has come through. Then the page carries on. - One pixel of scroll equals one pixel of travel. - With a mouse or pen, the row can be dragged and thrown. Start a drag only after 6px of movement, follow the pointer exactly, and carry its speed on release. Touch keeps native scrolling. - A drag that ends on a link or button must not click it. Never start a drag on a form field. Build - Pin the container, and tween the inner row's x to -(scrollWidth - container width) with ease: 'none' and scrub: true. Use invalidateOnRefresh so it measures again on resize. - Keep a reference to that tween and pass it as containerAnimation to ScrollTriggers inside the row, measuring from "left". - Anything already on the first screen never moves past a start position, so build those entrances without containerAnimation. Must hold - Every scene fits 100dvh, because a pinned row can't scroll vertically. Size type from its own box with container query units, and check laptop heights down to 640px. - Below 1024px wide, below 600px tall, or with prefers-reduced-motion, don't pin: show the scenes stacked as normal content. - Remove the tween, trigger and listeners on teardown. Done when the row works at 1366×625, a drag never clicks a link, and resizing the window keeps everything aligned.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script>
<main data-fx="track">
<div class="fx-track-inner">
<section>Scene one</section>
<section>Scene two</section>
<section>Scene three</section>
</div>
</main>
| Option | Default | What it does |
|---|---|---|
| data-fx-track-scrub | true | Follows the scroll exactly, or a number of seconds of catch-up |
| data-fx-track-drag | true | Set to false to turn off grab and throw |
| data-fx-track-throw | 1 | How far a throw carries |
| data-fx-nodrag | — | Put this on anything that must never start a drag |
04 — FAQ
Questions.
Does horizontal scroll hurt SEO?
No. The scenes stay ordinary HTML in reading order, and only their position on screen changes, so crawlers read them like any other section.
What happens on phones?
The effect switches off below 1024px wide or 600px tall, and the same scenes stack and scroll normally. The SiteFX site itself uses a separate swipe layout on phones.
What about visitors who prefer reduced motion?
They get the stacked layout, with no pinning and no sideways movement.
Can effects run inside the row?
Yes. The row rebuilds what is inside it, so entrances fire as each scene slides in. Other ScrollTriggers can follow the same movement through containerAnimation.
Licence
Horizontal Track · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.