Appearance
Scrollytelling
The ScrollerSection component is used to create a layout for scrollytelling with text sections on the left and a chart on the right.
Unfortunately, the demo is not working on this page as the ScrollTrigger plugin cannot be imported in this environment. To see a working example, please check the UNIDO IDR 26 project.
The Component
Usage
Pass the text sections to the sections prop as an array of objects with a text property. You can add additional properties for custom styling if needed, like a color property.
The component accepts a slot for the chart or other visual element that you want to display alongside the text sections.
Use the enter/leave functions to trigger changes when entering or leaving a section. The functions receive the index of the section as an argument.
Props
| Name | Default | Description | Type |
|---|---|---|---|
| sections | [] | The text sections to scroll through | Array |
| enter | (i) => {} | The function to call when entering a section | Function |
| leave | (i) => {} | The function to call when leaving a section | Function |
| enterBack | (i) => {} | The function to call when entering a section again scrolling up | Function |
| leaveBack | (i) => {} | The function to call when leaving a section again scrolling up | Function |
| addScrollPadding | false | Whether to add extra space at the end for more scroll | Boolean |
| markers | false | Whether to show markers for debugging | Boolean |
Dependencies
useScrollTriggercomposable