A ScrollController is specially written to control Framer's Scroll component.
| Option | Type | DefaultValue | Description |
|---|---|---|---|
| throttle | number | 150 | Optional - How often to update the controller's state. |
| Property | Type | Description |
|---|---|---|
| scrollX | number | The controller's current scroll position on the x axis. |
| scrollY | number | The controller's current scroll position on the y axis. |
| scrollPoint | {x: number, y: number} | A normalized value, 0 when the current page is the pager's first page and 1 when the current page is the pager's last page. |
| direction | {x: string, y: string} | A point with either "left", "right", "none" for x, and "up", "down", or "none" for y. |
| progress | {x: number, y: number} | Normalized values for each scroll axis. For progress.x, a value of 0 is full left and 1 is full right; for progress.y, a value of 0 is full top and 1 is full bottom. |
| markers | Marker[] | A stateful object containing data about each tracked marker Frame. |
| content | React.Element | The connected Scroll component's content frame. |
| contentOffset | object | The contentOffsetX and contentOffsetY values, for controlling a Scroll component's scroll position. |
| Method | Description |
|---|---|
| handleScroll(point: {x: number, y: number}) | Update the scroll controller using a point. Often, this is connected to a Scroll component's onMove callback. |
| scrollToPoint(point: {x: number, y: number}, options) | Change the page left or right. |
| scrollToMarker(id: string, edges: string or string[], offset: number, options) | Scroll to a given marker, edge, with an offset and animation options. |
| getMarker(props) | Get the current marker entry from a given set of Override props. |
The ScrollController will keep track of certain Frames, referred to here as "markers". Markers are recognized automatically. A marker must be a child of the controller's connected scroll component's content, and may be a design component with an override prop named "markerId" (most often, this will be a hidden or opacity zero text layer, ticked to be overridable) or may be a code component with a markerId prop.
For each markers, an entry is made in the controller.markers. In the case of design component markers, the marker's property name will be the props.id of the design component instance, automatically generated by Framer X. If a marker is code component, its property name will be the value of its props.markerId. For example, a design component's entry may be found at controller.markers.id_kukhbjalsdc, whereas a code component's entry may be found at controller.markers.myMarker.
Each marker's entry has the following stateful properties.
| Property | Description |
|---|---|
| absolute | The marker's absolute position within the content Frame. |
| offset | The marker's position relative to the Scroll component's frame. |
| progress | The marker's progress through the Scroll component's frame. A marker's progress will be {x: 0, y: 0} when it is below and to the right of the frame and {x: 1, y: 1} when it is above and to the left of the frame. |
| intersect | A point with normalized x and y properties describing how much of the marker is currently in view. |
| clip | A point describing which edges of the marker are clipped, or out of the Scroll component's current window. For x, a marker's clip state may be "none", "both", "both-left", "both-right", "left", or "right". For y, a marker's clip state may be "none", "both", "both-top", "both-bottom", "top", or "bottom". |
| visible | Whether the marker is at all visible in the Scroll component's current window. |
Example: