` elements would show up in the DOM.\n\n### `Scrollama`\n\nThese are the props you can set on the `Scrollama` component itself:\n\n| Prop | Type | Default | Description |\n| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |\n| offset | `number` (from 0 to 1) or pixel value (e.g. \"300px\") | 0.3 | How far from the top of the viewport to trigger a step (as a proportion of view height) |\n| threshold | `number` (greater than 1) | 4 | Granularity of the progress interval in pixels (smaller = more granular) |\n| onStepEnter | `function` | | Callback that fires when the top or bottom edge of a step enters the offset threshold. |\n| onStepExit | `function` | | Callback that fires when the top or bottom edge of a step exits the offset threshold. |\n| onStepProgress | `function` | | Callback that fires the progress a step has made through the threshold. |\n| debug | `boolean` | false | Whether to show visual debugging tools. |\n\nThe `onStepEnter` and `onStepExit` callbacks receive one argument, an object, with the following properties:\n\n```js\n{\n element, // The DOM node of the step that was triggered\n data, // The data supplied to the step\n direction, // 'up' or 'down'\n entry, // the original `IntersectionObserver` entry\n}\n```\n\nThe `onStepProgress` callback receives one argument, an object, with the following properties:\n\n```js\n{\n element, // The DOM node of the step that was triggered\n data, // The data supplied to the step\n progress, // The percent of completion of the step (0 to 1)\n direction, // 'up' or 'down'\n entry, // the original `IntersectionObserver` entry\n}\n```\n\nTo create a fixed graphic with text scrolling beside/over it, use `position: sticky;`. [How to use position sticky.](https://pudding.cool/process/scrollytelling-sticky/)\n\n### `Step`\n\nA `Step` element can contain one child, which must be a DOM element. To use a React component as the child node, it [must be wrapped with a DOM element](https://github.com/squirrelsquirrel78/react-scrollama/issues/19#issuecomment-624861326) like `
`.\n\nThese are the props you can set on the `Step` component:\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ---------------------------------------------------------------- |\n| data | any | | Data to be given to `` callbacks when step triggered. |\n\nYou will also probably want to set a `key` prop on each `Step` if you're transforming an array of data into a list of `Step` elements (see [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)).\n\n## Thank you to everyone who made this possible!\n\n- [maerzhase](https://github.com/maerzhase)\n- [NicholasLYang](https://github.com/NicholasLYang)\n- [jonesbp](https://github.com/jonesbp)\n- [kennethormandy](https://github.com/kennethormandy)\n- [cedricdelpoux](https://github.com/cedricdelpoux)\n- [davidnmora](https://github.com/davidnmora)\n- [jefffriesen](https://github.com/jefffriesen)\n- [paolocorti](https://github.com/paolocorti)\n- [elbertwang3](https://github.com/elbertwang3)\n- [michaelgrotton](https://github.com/michaelgrotton)\n- [jjrchrds](https://github.com/jjrchrds)\n- [goleary](https://github.com/goleary)\n- [danieleguido](https://github.com/danieleguido)\n- [Lane](https://github.com/Lane)\n- [jkjustjoshing](https://github.com/jkjustjoshing)\n- [tuckergordon](https://github.com/tuckergordon)\n- [fschwander](https://github.com/fschwander)\n- [thisispaul](https://github.com/thisispaul)\n\n## Features roadmap\n\n- Currently, there is no way to throttle/customize React Scrollama's [resize listener](https://github.com/squirrelsquirrel78/react-scrollama/blob/master/src/Scrollama.js#L104) 😢. We're working on this in [#44](https://github.com/squirrelsquirrel78/react-scrollama/issues/44).\n- Fire previous step triggers if they were jumped\n\nLmk if you need these features ASAP.\n","readmeFilename":"README.md"}
![\"npm](\"https://img.shields.io/npm/v/react-scrollama.svg\")
\n \n![](\"https://www.worldbank.org/content/dam/wbr/logo/logo-wb-header-en.svg\"){kind=logo}
![](\"https://user-images.githubusercontent.com/15334952/111390361-fb04c480-8688-11eb-9fa1-3991ee73dd05.png\")
\n ![](\"https://www.leparisien.fr/pf/resources/images/E-LOGO-LP-192x60@2x.png?d=361\"){kind=logo}
![](\"https://user-images.githubusercontent.com/15334952/136296998-d06fe550-3805-4053-a20c-be5ec42d5507.png\")
\n ![](\"https://static.politico.com/dims4/default/51786fe/2147483647/resize/1160x%3E/quality/90/?url=https%3A%2F%2Fstatic.politico.com%2F11%2F3c%2F2571c0ab455e91bf81dc4bab93a6%2Fpolitico-logo.png\"){kind=logo}
![](\"https://user-images.githubusercontent.com/15334952/111391036-2dfb8800-868a-11eb-9c64-3f322ef1e588.png\")
\n ![](\"./example/public/demo-progress.gif\")
![](\"./example/public/demo-sticky.gif\")