How to use animation in an interactive Shorthand story

Animation can breathe life into your Shorthand stories.

Shorthand was created as a platform for multimedia storytelling, and our customers consistently use photos and videos to tell beautiful, visual stories. However, even the best storytellers can overlook the outsize impact that simple illustrations and animations can make.

Animating your story may seem difficult and time-consuming at first, but we've enabled some simple ways to help you apply animated effects to your story. For example, adding a fade effect to images and text is as simple as editing your Section Options in the Shorthand story editor.

Let's look at some more advanced techniques for animation, and our best practices. And if you're interested, you can learn more about interactive marketing in our guide, as well as interactive infographics.

Scrollmation

Take a look at the map image as you scroll through this page. It moves! There's no fancy GIF or coding in place — it's simply a sequence of images, uploaded as frames into Shorthand's Background Scrollmation section.

In a Shorthand story, the reader controls the speed of the animation by scrolling. Like traditional animation, the general rule follows that the more images, the smoother the animation — but depending on the length of the text, you may need only a few images to make the animation smooth, or you may need many.

It's tempting to upload as many frames as you can, but you also need to consider the file size of all those images. Adding many images to a Scrollmation may cause issues for readers with slower internet connections. We recommend a limit of 10 images. Using a limited colour palette can also decrease file size.

You can also learn more about using Scrollmation and Background Scrollmation in this blog post.

Now continue scrolling to see an animation that was created with our Reveal section, using only three images.

Start creating with Shorthand

It's the fastest way to publish beautifully engaging animated stories, reports, internal comms, and more.

Sign up now

Reveal for animations

For illustrated animations where you don't want to create all the in-between frames, standard Shorthand transitions may be all you need.

The backpack animation above contains just three images in a Reveal section. The transitions between the images (a swipe up and a swipe down) create a sense of movement without needing to code any animation or use sophisticated design tools.

Using fades

The owl animation in this section only uses four frames. The effect of the light fading up is a trick created through a slow fade transition effect applied in the settings of this Background Scrollmation section.

You can apply these same Scrollmation and Reveal techniques to not only illustrations and photographs, but all kinds of images: graphs, charts, maps, and more.

Tools

How to produce images
for animations

For original animations, your images will likely be created in a program like Adobe Photoshop or Illustrator, where you can easily save the animation frames as simple JPEGs.

If you'd like to extract frames from an existing animation to use in your story, you may want to use a free third-party tool. For videos, you can take screenshots manually or use a tool like VLC Media Player, which allows you to capture an image every set number of frames. For GIFs, EZGIF can split the animation into still images.

The usual Shorthand image guidelines for optimising media apply.

Learn more about image file formats.

Some examples of animated Shorthand stories

Caught, a Stuff Circuit investigation on the fishing industry, uses our Background Scrollmation section to highlight the countries actively fishing in the Pacific. The Stuff team made a small tweak and hid the text column using developer tools.

Anatomy of the Moon Landing, an interactive story by Sky News, uses our Reveal feature to create animations that explain the components of the rocket involved in the moon landing and its journey.