These are the props you can set on the Scrollama component itself:

| Prop | Type | Default | Description |
|----------------|---------------------------|---------|-----------------------------------------------------------------------------------------|
| offset | number (from 0 to 1) | 0.3 | How far from the top of the viewport to trigger a step (as a proportion of view height) |
| progress | boolean | false | Whether to fire incremental step progress updates |
| threshold | number (greater than 1) | 4 | Granularity of the progress interval in pixels (smaller = more granular) |
| onStepEnter | function | | Callback that fires when the top or bottom edge of a step enters the offset threshold. |
| onStepExit | function | | Callback that fires when the top or bottom edge of a step exits the offset threshold. |
| onStepProgress | function | | Callback that fires the progress a step has made through the threshold. |
| debug | boolean | false | Whether to show visual debugging tools. |

The onStepEnter and onStepExit callbacks receive one argument, an object, with the following properties:

`js
{
element, // The DOM node of the step that was triggered
data, // The data supplied to the step
direction, // 'up' or 'down'
}
`

The onStepProgress callback receives one argument, an object, with the following properties:

`js
{
element, // The DOM node of the step that was triggered
data, // The data supplied to the step
progress, // The percent of completion of the step (0 to 1)
}
`

To create a fixed graphic with text scrolling beside/over it, use position: sticky;. How to use position sticky.

$3

A 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 like