Scrollytelling Possibilities

A Gallery of What We Can Build

Scroll to explore the options
01

Getting Started

Simple Distribution

This is running from just one 9MB file. No installation, no dependencies, just runs in your browser.

When we're done building your presentation, you'll get three files — one for Mac, one for Windows, one for Linux. Double-click any of them and they just work.

Share it with your prof, your team, anyone. They don't need to install anything. They just open it. That's it.

Background Animations

We can transition between any colors you want. Gradients, solids, whatever.

Each scroll step can have its own vibe. The transitions are smooth and automatic.

Shape Animations

Simple SVG shapes can grow, pulse, move around.

These circles are animating in with different delays and sizes. Basic, but effective.

Vector Graphics Work Great

These SVG logos each animate in differently. Watch them:

  • Fade and scale
  • Slide from left
  • Rotate and zoom
  • Bounce in

Each can have its own personality and timing.

Images Work Too

Not everything needs to be a chart or graphic. Sometimes you just need a good photo.

We can:

  • Fade images in and out
  • Scale and zoom them
  • Transition between multiple images
  • Add parallax effects
  • Overlay text or graphics on top

Photo credit: Unsplash

D3 Data Visualization

Watch these charts animate in. We're showing four different types at once:

  • Bar chart with staggered growth
  • Donut chart with animated slices
  • Tree map with expanding rectangles
  • Line graph with path drawing

Every chart can have custom animations, colors, and interactivity.

The Process

Here's how this usually goes:

  1. You sketch out the story flow - what happens in each section
  2. We talk through what's realistic and what's extra
  3. You send me assets (SVGs, data files, images)
  4. I build it and we iterate together

Keep it simple at first, add flourish later.

Ready When You Are

Think about what story you want to tell. Sketch it out, even if it's rough.

Show me examples of things you like. Tell me what you're going for.

We'll figure out the rest together.

Check Out The Pros

Some sites doing this really well:

If you see something you like, show me. We can probably do it.

Let's Make Something Cool

This presentation is just scratching the surface.

Send me your ideas and we'll start prototyping.