svelte-scrolly-min

A minimal scrollytelling starter built with SvelteKit to explore possibilities for AFP text and graphics.

Demonstrates the "sticky graphic + scrolling steps" pattern: a sticky image panel on the left swaps images with a crossfade transition as the user scrolls through narrative steps on the right. A normal article section follows the scrolly section.

Adapted from Connor Rothschild's Svelte Scrollytelling Starter

To view the final product: scrolly.corinfaife.co

Structure

src/
├── lib/
│   └── Scrolly.svelte       # IntersectionObserver-based scroll tracker
└── routes/
    └── +page.svelte         # Demo page (War in Ukraine)

Scrolly.svelte

A reusable component that wraps .step elements and uses IntersectionObserver to track which step is in the viewport. Binds the active step index via bind:value.

Props:

• value — bound integer, updated to the index of the currently active step
• stepSelector — CSS selector for step elements (default: '.step')
• rootMargin — IntersectionObserver root margin (default: '0px 0px -50% 0px')

Usage:

<Scrolly bind:value={currentStep}>
  <div class="step">Step one content</div>
  <div class="step">Step two content</div>
</Scrolly>

+page.svelte

Demo page showing the full pattern:

• A slides array maps step indices to images
• Svelte's crossfade transition swaps images smoothly as currentStep changes
• Two-column grid layout on desktop (sticky image left, steps right)
• Overlay layout on mobile (image sticky behind semi-transparent step cards)
• Post-scrolly <article> section for conventional long-form text

Layout

Desktop (>900px): 2fr 1fr grid — sticky image panel occupies the left two-thirds, scrolling steps occupy the right third.

Mobile (≤900px): Single column with the image panel sticky at the top and step cards overlaid on top with a semi-transparent background.

Developing

npm install
npm run dev
# or open in browser automatically:
npm run dev -- --open

Building

npm run build
npm run preview   # preview the production build

To deploy, install a SvelteKit adapter for your target environment.