Set images in the foreground of your story to fade, rotate, and/or zoom into view when your readers scroll, without the need for code, video, or animated gifs.

To apply an animation style to an image, in the story editor, mouse over a foreground image. The context menu that appears provides options for changing the image and its size, alignment, deleting the image, and a button to access more options including cropping, adding rounded corners, and the animation styles:

Animation options include some single-click pre-sets to set the image to fade in, zoom in, or slide into view. To set any of these styles, simply click the appropriate button. To see how the animation will appear to your readers, preview the story and scroll to the section to which you applied the animation.

To easily set foreground images to fade in as the story scrolls, click the first animation quick setting for 'Fade'. The image will slowly fade into view as it enters the browser frame. If you have multiple images in the section and you wish to apply the same styles to all of them (including cropping, rounded corners, and animation), click the toggle marked "Apply to all section media" as shown below:

To change the speed of the fade animation, click the 'Custom' icon at the end of the animation row and choose a different speed. Custom options are explained in more detail below.

To quickly set your foreground images to zoom in on scroll, click the 'Zoom' icon from the Animation section of the Style menu:

The speed and amount of zoom, as well as whether the image zooms in or out, can be further adjusted with the 'Custom' settings. Whether the image zooms in or out when scrolling into view, the animation finishes with the image displaying at its set size. ie, as in the image above, if the image is set to display at 60% of the column width, then that is its size at the end of the animated zoom in or out

Set your foreground images to slide in on scroll by choosing the 'Slide' quick setting from the Animation section of the Style menu.

When using the quick setting, images will slide 'Up' at a slow speed and with a quick fade when their section of the story comes into view. The speed and direction can be modified with the 'Custom' settings. More information about the custom settings follows.

Along with the quick presets, an additional icon in the editor menu row for animation styles, labelled 'Custom', allows for combining multiple styles and changing some of their attributes. It is possible, for instance, to set an image to fade in quickly or slowly, and/or to have a single image fade in while rotating 10 degrees into place and zooming out. The image below shows how to access and use the 'Custom' settings.

In the following example, image have been set to rotate by 10 degrees and fade in:

As with combining food flavours, often "less is more". Generally speaking, using animation sparingly and consistently in the story produces the most pleasing results. That said, there are times when using multiple different styles together can produce great-looking results, and mixing styles in a section is as easy as choosing different options from the Animation menu for different images.

In the example below, each of the images is using a different combination of animation styles:

To reset a custom animation attribute, click the red circular icon at the left of its row in the Custom menu. Similarly, to remove all animation from an image, click the red circular icon to the left of the animation row in the image style menu.