How to use animation in an interactive Shorthand story
Make your stories dynamic and visually engaging
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.
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 our guide to 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 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.
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.
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
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.
Balancing the books, an aviation report produced by Deloitte, Euromoney, and Airfinance, made 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.
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.
Built with Shorthand