Use a Scrollpoints section to draw attention to multiple parts of a large image.

As readers scroll through this section, they will be shown multiple 'frames' or 'points', where each is essentially a custom representation of the same section.
On each of the frames, the background image can be marked with icons, boxes, labels, and lines, and/or zoomed to areas you have defined. Each frame may also be accompanied with explanatory foreground text.

Example use cases for this section type include:

A Scrollpoints section contains a single background image, but can contain multiple views of that image. As readers scroll through the story, they reach each of these points in order. These points or frames define how much of the image is visible on screen and whether any part or parts of the image are marked with an icon, box, line, label, etc.

The default Scrollpoints section shows someone sitting on a swing above a cityscape and has four frames defined. Each frame shows a different representation of the image and is accompanied by a foreground text box:
​

To swap the background image for something new, click the green "Edit Scrollpoints frames" button on the left of the editor:

​

The Frames column opens on the right of the screen, showing each of the frames currently in the section:

At the top of the column, click the 'Change base image' button to open the media panel and upload a new image from your computer.

We recommend uploading an image of up to 5000px wide. There's no need to upload an image larger than 5000px wide, however smaller images may not enable zooming in as far. If you don't intend to zoom in on any frame, then an image of 2560px wide should be sufficient.

In the image above, you can see four thumbnail images in the right-hand column, each representing a frame in the section. To add a new frame, click the 'Add frame' button towards the bottom of the column:

Editing the foreground text in a Scrollpoints section is simple: just highlight the existing text and replace it with your own. The standard Shorthand text formatting options are available, as is the ability to include images and other media.

To add or edit the markers shown on any frame, click the "Edit Highlights" icon next to the frame:

A panel will open, with which elements can be added, removed, and edited:

A toolbar at the top of the panel allows for:

Existing elements can be modified in size and shape by dragging the white handles that appear in their corners:

Click the cog icon at the bottom of any element to see a menu from which a wide variety of styles can be applied:

An overlay is a full-screen single-colour layer between the background image and other elements in the frame. It can be set to any colour or opacity. The overlay element is useful to visually separate some elements from others: whether the background from foreground, or just a part of the background image from other parts. Foreground elements in the frame can be set to 'cut through' an overlay layer: resulting in their shape not being affected by the overlay: like a window through the overlay layer.

The amount of the background image that is shown on each frame is determined by a combination of the placement of the foreground text box, the position and size of 'highlights' (boxes, lines, icons, labels) on the frame, and the shape of your reader's screen.

The zoom level will be automatically adjusted on each frame to ensure that at least all of the the items (boxes, icons, lines. labels) on that frame are in view, and where possible that foreground text will not obscure them. If you wish to ensure that ALL of the background image is shown, then you can do so by drawing a box that includes the full iimage (or no box or marker at all). The box can be set with a transparent colour or the effect of 'hidden' if you wish to use it to affect the zoom level of the frame but be invisible to readers. If the foreground text box is placed to the left of the screen, the area that includes any items will be shown to its right, and vice versa. If the foreground text box is placed in the middle of the screen, then the parts of your image containing items will appear beneath the text box.

As always, it is important to test your story on both wide and tall screens to ensure it renders well on both.

Scrollpoints sections automatically animate the view from frame-to-frame: smoothly zooming and/or shifting to ensure that the elements on each frame are in view, while also scaling, repositioning, fading, or colour-changing elements that appear on adjacent frames but whose attributes have changed.

The viewport is scaled and shifted automatically to accommodate all the items on a frame. If one frame requires more or less room to show its items than the previous or next frame, then the viewport will animate between the two necessary states. In the example below, the red rectangle is drawn around a different part of the image in each frame, and the text box is set to appear on a different side of the rectangle. As the story is scrolled between the two frames, the elements and view animate automatically to fit in the different arrangement. The speed of the transition is determined by how much movement is required.

To keep the viewport consistent between multiple frames in the section, create a box that will set the overall viewport size on frame one, placing any other items within the area of the box, then use duplicates of the frame (or copy and paste the box into subsequent frames). You can set the box style to "hidden" or set its out line to transparent in order ot have it affect the view but not be seen by readers.
​
To change the viewport, but keep the zoom level consistent, use the above approach, but change the box position on each frame. The view will shift, but the zoom level will stay the same, as long as any other items are within the boundary of the box.

To constrain viewport movement to be perfectly horizontal or vertical, hold the shift key on your keyboard as you reposition the elements on screen that are affecting the viewport (eg a box encompasing the limits of the view). This will show guidelines that the item will 'snap' to as it is moved. This is useful for creating a Scrollpoints section that moves perfectly horizontally or vertically from point to point and maintains a consistent zoom. This is beneficial for any image built with a grid or with strong horizontal or vertical cues (graphs, charts, plans, timelines, etc).

If a frame has a new item on it (one that isn't present on the previous frame), then it will very quickly fade into view as the reader enters the frame.

If the item was present on the previous frame, but is in a new location or shown at a different size or colour, then a transition will be automatically applied to blend between the two frames. This will be a simple linear movement if the position changes, or could be a combination of movement, scale and colour if multiple attributes are changed.

In the image below, the rectangle is repeated on both frames, but does not change shape or position, so doesn't appear animated between the two frames and doesn't change the viewport. The heart, however is larger on frame 2, so is automatically animated to change size as the story is scrolled between the two frames.

To ensure that the items you are working with are the 'same' object on adjacent frames, duplicate an existing frame to make a new one with the same items present (and then change their style if you wish), or use copy and paste functions from your keyboard to select an item on one frame and paste it into another.

To have an item appear on multiple frames but not animate between them (for example arrows indicating different parts of an image, but simply appearing and disappearing from view between frames), draw or place new similar objects rather than copying/pasting or duplicating a frame.

Scrollpoints sections support a number of options including, if your theme allows for it, changes to the text colour, colour & opacity of text boxes, and colour & opacity of an overlay that covers the area surrounding the image in the section. To access the options panel, click the "Section options" icon next to the section thumbnail:

Changing the colour of text and the text boxes works in the same way as in other sections. One option unique to Scrollpoints however, is the ability to change the colour and opacity of the surrounding area outside of your image. When the points specified in your section can't be displayed in a way that fills the screen, a background is generated from a blurred version of the main image overlayed with a semi-opaque colour. This colour and its opacity can be modified with section options:

For more general information about section options, see: Section Options.