How to use animation in an interactive Shorthand story

Make your stories dynamic and visually engaging

Publish your first story for free with Shorthand.

Build stunning, interactive web content fast — no code or web design skills required.

Get started.

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 create any frames, or real animation.

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 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 (tutorial here). 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

Sky's Shorthand animation shows the stages involved in launching the Apollo rocket.

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.

Deloitte's Shorthand story shows how to animate graphs and charts.

Balancing the Books, an aviation report produced by Deloitte, Euromoney, and Airfinance, makes use of our Scrollmation feature to visualise data in an engaging way.

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. For those of you who aren't afraid of a bit of CSS, we've created handy CSS guidelines for common selectors.

Want to try it for yourself?

Download the files used in this story.

Sign up to create your own story.

Animation can breathe life into your Shorthand stories.

Shorthand was created as a tool 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.

But let's look at some more advanced techniques for animation, and our best practices.

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 our 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.

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