The Scrollmation section (or 'Two Column' or 'Two Row' Scrollmation section) features a text column and images that change in sequence as the reader scrolls.

By default, on wide screens, the text and images appear side-by-side in columns and on narrow screens (such as phones) the images and text appear in the same column with the images at the top of the screen on a layer above the text, so that the text scrolls under the images.

As the reader scrolls, if there is more than one image they will change in sequence. The rate at which they change will depend on how much text has been entered and how many images have been added.

Edit the images by clicking the icon in the top-left of the image:

This will open a sidebar that shows the "frames" of the section: a thumbnail image of each of the pictures ("frames"), in the order in which they will be shown to your readers as the section is scrolled:

To remove the default images, you may do so one-by-one by clicking the bin icon that appears next to each thumbnail, or delete them all at once by clicking the Delete All button at the bottom of the section.

To change any frame, click its thumbnail in the frame viewer and choose an image to upload in its place. Alternatively, the large drag and drop area at the bottom of the thumbnails can be used to drag in multiple images from your computer at once, or clicked so that you can make a selection of multiple images from your computer. .

On wide screens the column of text in the Scrollmation section can sit on either the right or left of the screen. Use the arrow icon next to the text column to move it.

On smaller screens, the Scrollmation section will, by default, change to two rows with the image(s) appearing in a landscape orientation row at the top of the screen and the text below.

Alternatively, for small-screen view, images can be manually placed within the text column rather than appearing at the top of the page. This allows you to display all or just some of your images within the text.

To do so, hover over the menu in between text blocks and choose the option with the mobile device icon labelled Insert Scrollmation Inline.

You'll be shown a panel of each of the images in your Scrollmation set. Clicking one of the images will insert it into that place in your text.

You do not need to place your images in the same order that they are used in the Scrollmation, nor do you have to use any or all of them. If you do choose to place one or more of your scrollmation images inline, the standard Scrollmation display will not show within the section on small-screen devices.

You can also easily attach a link to inline images.

Media guidelines

Uploading larger images is not a problem: they'll automatically get processed by Shorthand to deliver to your readers at a size appropriate for their screen. Scollmation images display in full, so image 'safe areas' and 'focal points' do not need to be considered.

Inline image:

Additional tips

Scrollmation sections support options including adding a transition effect between changes to the images in the section, and changes to the section padding:

The transition effect can be set to "None", which will make the images in your section instantly change from one to the next, or to "Background fade", which will make the images fade out and fade in as they change from one to the next. If the purpose of your frames is to create an animation, then 'None' is likely to be your preferred choice, whereas if your images are each quite different from one another in subject and/or size, then the 'Background fade' option is likely to give a more pleasing result.

The padding section option changes how close the content of the section can appear to the section top or bottom. This can be set to small, medium, or large.

If you start with a scrollmation section and later decide that you'd prefer the section was a simple text section or Background Scrollmation section, you can make the change by deleting the image column.

​