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

As readers scroll through this section, the background image can be marked, highlighted or zoomed to areas (points) you have defined. Each point may be accompanied with explanatory text.

Example use cases for this section type include:

A Scrollpoints section contains a single image, but can contain multiple views of that image. Each single view within a section is called a 'scrollpoint'. As readers scroll through the story, they reach each of these points in order. A scrollpoint defines how much of the image is visible on screen and whether any part or parts of the image are marked with a rectangular highlight and/or dot to which you can specify colours from your story theme. Each scrollpoint can also have accompanying text.

When you add a new Scrollpoints section to a story, it loads by default with a picture of someone sitting on a swing above a cityscape. The default section has four defined points. Each point shows the image at a different location and zoom level and has a text box.
​
​

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

​

A column will appear on the right showing the image that is currently used in the section and it's frames. Click the 'Change base image' button at the top to open the edit media panel and upload a new image from your computer. Alternatively, you can drag an image from your computer over the existing image shown in the panel.

We recommend uploading an image of close to 4096px wide. There's no need to upload an image larger than 4096px wide, however smaller images may result in blurry or pixelated views for some readers, especially if small highlight areas are specified at any of the defined scroll points.

Ideally, your uploaded image should be under 5Mb in file size. Jpg format works best for photos. You may find that a gif or png format works better for graphics such as diagrams or charts with a limited colour palette: producing a smaller file size and crisper detail.

As with other Shorthand section types, editing the text in a Scrollpoints section is simple: just highlight the existing text and add your own. The standard Shorthand text formatting options are available, as is the ability to include images and other media within the text blocks associated with each point.

To edit the amount of the background image that is shown at a scrollpoint, click the green "Edit Scrollpoints frames" button on the left of the editor, which will open the scrollpoints frames column (shown below). Select the top 'Edit Highlights' icon on the right of the frame you wish to edit:

A panel will open in which highlights and markers can be added, removed, and edited.

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

A highlight, defined by the box, doesn't determine exactly what will be shown on screen (as that will depend on the size and shape of your reader's screen as well as the position of the text box if it contains text) - instead, when your reader scrolls to this point of the story, the image will move or "zoom" to show at least all of the highlighted area. On a typical 'landscape' or 'wide' screen such as a desktop or laptop, if the text box is positioned on the left or right of the screen, the highlighted area will be fully visible on the opposite side of the text box. On a 'portrait' or 'tall' screen the highlighted area will almost fill the width of the screen, and any associated text box will scroll over the highlight. As always, it is important to test your story on both wide and tall screens to ensure it renders well on both.

The box that defines a highlight can appear in any of the colours available in your story theme, and with a variety of outline styles, or no outline at all.

To change the style, select the highlight, then click the dropdown box labelled "OUTLINE":

​

Along with the 'Solid' style, there are some options for animating the outline of the highlighted area.

The 'None' option for outline style means that your readers won't see an outline for the chosen highlight, though it will still determine what shows on screen when your readers view this part of the story. This is a useful technique for setting an image zoom level without drawing your reader's attention to a specific part of the image.

The paintbrush icon enables setting a colour for the highlight outline, while the "Darken around" toggle applies a dark overlay to the image area outside of your chosen highlight.

Along with an outline, a highlight can contain a "marker" that appears as a coloured circle. This too can be toggled on or off at the top of the Highlight editor panel, and can be styled with colours from your story theme.
Markers and highlights can also have associated labels.

Drag a marker to position it anywhere within its highlight box. Markers are useful to indicate specific elements within the highlighted area. For instance, as illustrated below, from an image of a crowd, you may wish the screen to zoom in to show more detail of the highlighted two people, but indicate one of them with a marker so that they can be described in accompanying text. To achieve this, draw a highlight around the two people and turn the outline for the highlight off, while turning a marker on and positioning it on one of the people. The result will be that as your reader scrolls to this point, the screen will zoom to show at least the area drawn around the two people (without a visible box around them), and mark one of the people with a coloured circle.

A single scrollpoint can display multiple highlights. To achieve this, draw a new highlight box within the highlight editor panel. Each box can be independently styled (different colours, visible or not, and with or without a marker). The image below shows two highlights.

As your readers come to this point in your story, the image will zoom in or out to ensure that all of the highlighted areas are collectively visible on screen.

To remove a highlight, click on one of its edges to select it, then click the red trashcan icon at the top of the panel. A scrollpoint that has no highlights defined will result in the full image being shown to your reader when they reach this point of the section.

Tip: You can use one or more highlights on screen with no visible outline or marker to force the browser to ensure that parts of the image are shown but not visibly highlighted - ie, if you wish to ensure that a large section of the image is shown, but that only a smaller section has a visible box and/or marker.
​
​

By default, a Scrollpoints section has four points defined, starting with a point zoomed out to show the full image in the section, followed by two different 'zoomed-in' points within the image, and then zooming out to show the full image again. Your Scrollpoints section can have more or less points, at zoom levels you set.
​

It's easy to define multiple points (each with their own highlights and markers), re-arrange the order of your points, and remove them. To do so, hover over the highlight frame and drag them in the order as you wish in the column.

The right column in the editor will show thumbnails representing each point in this Scrollpoints section:

You can add new points to the section by selecting the white 'Add frame' button towards the bottom of the column:

Buttons to the right of each thumbnail enable deleting and copying (duplicating) a point, along with opening the highlight editor panel for the highlights shown at that point:

When you have finished adding or editing the points in your section, click 'Done' at the bottom of the highlights column to close the panel and return to the main editor view.

The speed and direction of movement when your reader scrolls through this section type is determined by on a number of factors including the size of the image, the distance between the highlights on successive 'points', their relative size, and the position of their associated text blocks. If you find that the movement between two points is too fast or slow, try changing the location of the text block and/or the size of your highlighted areas.

To keep the zoom level consistent between multiple points in the section, rather than create new points and their highlight areas "from scratch" (which will likely result in areas of different size and therefore different zoom levels), create one point with the zoom level you'd like to use, then duplicate the scrollpoint. This will create a new point with the same highlights and text. On this new point, change the text and edit the highlight area to re-position and style the highlight box. Dragging from the middle of a highlight box to reposition it will maintain its size and therefore the zoom level for your readers at this point. Drawing a new highlight box or changing its proportions by dragging one of its corner handles will change its size, and therefore the zoom level for your readers.

As you drag to reposition a highlight box, horizontal and vertical guidelines will appear to help you constrain movement to perfect side-to-side or up/down movement. 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).

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.