Overview

The Svelte <Scrolly> component is a creative tool designed to enhance narrative visualizations, often referred to as "scrollytelling." Developed for the MIT's Interactive Visualization & Society course in 2024, this component allows users to structure their content in a way that separates scrolling narratives from static visualizations, providing a unique storytelling experience. The component is incredibly versatile, allowing for a combination of scrolling content that tells a story alongside visuals that add depth and context without overlapping with the text.

One of the main advantages of <Scrolly> is its ability to customize how the narrative and visualization interact with each other. Rather than merely stacking them on top of one another, this component allows them to be displayed side by side or in varying proportions based on user preference. This innovative approach not only fosters engagement but also enhances understanding by visually representing data while guiding the reader through a narrative journey.

Features

Custom Layouts: Flexibility to choose between story or visualization first layouts, allowing for tailored storytelling experiences.
Responsive Widths: Adjust the proportions of the visualization and story with customizable width options, optimizing the layout for different devices.
Progress Control: Features properties like progress and progressRaw to fine-tune the scrolly progress for an immersive user experience.
Viewport Threshold: Set a specific percentage of the viewport to trigger the scroll effect, ensuring dynamic and responsive engagement.
Debounce & Throttle Options: Control the frequency of progress updates to optimize performance and enhance user experience.
CSS Customization: Supports extensive CSS customization, allowing style adjustments for layout, gaps, and widths to fit seamlessly with existing designs.
Interactive Gap Settings: Specify the gap between the story and visualization to enhance or minimize spatial relationships within the display.
Margin Control: Adjust how far the visualization is offset from the top of the viewport, adding further flexibility to design arrangements.

Leaverou

HTML5 Progress Polyfill

Markapp

Svelte Scrolly