How to create interactive graphics with Reveal sections in Shorthand
Lyndsee Nielson — Editorial Success Manager
Each section in the Shorthand editor offers its own kind of magic. From our Scrollmation (Background and regular versions) to Scrollpoints sections, your images can change or pan as you scroll. We also have the Title and Text Over Media sections that can turn a basic title heading into a captivating pause in the story, with background video moving silently on repeat, or a 3D image bringing your page to life.
But one of my all time favourites is the Reveal section. This simple section is so incredibly versatile and can really be a showstopper with minimal effort!
As an Editorial Success Manager at Shorthand, I recommend this particular section to our customers all the time. It’s easy to use but has the power to make a big difference in the interactivity of your story. In this article, I am going to show you how to create the following items using the Reveal section:
Timeline
Timelines are great for when you want to show a number of events happening over time. There are a couple of different ways that you can use the Reveal section to create this effect for your story.
To have a timeline that reveals vertically, essentially in the same direction that your reader scrolls, you’ll want to:
1. Create an asset for your timeline that includes a line running up and down.
2. Duplicate this asset a number of times so that the line is always located in the same place.
3. Depending on how many events/points you want to include, begin plotting these along your timeline.
4. Upload the assets by clicking the green “Edit Background Media” button.
5. Click the “Delete All” option in the media panel that populates.
6. Upload your assets.
7. Make sure your assets are in order (you can always rearrange them by clicking on the three horizontal lines to the left of an image and dragging it above or below another image).
8. Change how the images transition by selecting a type. For vertical timelines, the "Down" transition will work best.
9. Click the green “Done” button and wait for the media to save!
For horizontal timelines, follow these same steps with your line running horizontally through the assets you create and the events/points plotted from left to right instead of top to bottom. For horizontal timelines, set the transition to “Right.”
You might also consider creating an asset for each milestone with text and an accompanying image. Simply duplicate the first asset, swap out the text for the next point on the timeline, and then insert a new image over/alongside the last one. Copy this second asset, change the text and add another image. This will begin to look like a stack of photos piling up!
Timeline Examples
Quotes/Titles
You can include quotes in Text sections by using a pull quote, or you can use a Text Over Media section to create a full-width block quote. Still, there’s something particularly powerful about the quote appearing as you scroll. This is a great effect for titles, too! Here’s how:
1. Select an image that you want as the background.
2. Duplicate this image and insert the preferred quote. Here, you can also edit the styling of the image (e.g. include an overlay, make the image black and white with the quote in color...)
3. Now upload the assets by clicking the green “Edit Background Media” button.
4. Click the “Delete All” option in the media panel that populates.
5. Upload your assets.
6. Make sure they are in the preferred order—remember, you can drag and drop using the three horizontal lines!
7. Change how the images transition by clicking on the “Image Transitions” icon in between the images.
8. Click the green “Done” button and wait for the media to save!
Interactive Graphic
Interactive graphics are a super easy way to turn static data visualisations into something more, well, interactive. Imagine your audience's delight with an effect like a bar chart that grows or changes as they scroll! Here's how to create this effect:
1. First, using your tool of choice, create your complete graph (Image 1).
2. Now, duplicate this graphic and remove part of the graph (Image 2).
3. Duplicate Image 2 and delete another part of the graph (Image 3).
4. Repeat this process as many times as needed, considering the layers of the graphic that you want to reveal in stages. Remember to always duplicate the previous image!
5. Next, upload your assets into the Reveal section by clicking “Edit Background Media”.
6. Click the “Delete All” option.
7. Insert the images in reverse numerical order, so that they layer up to reveal the final, full graphic.
8. Change how the images transition—Fade, Down, Up, Left, or Right.
9. Click the green “Done” button and wait a sec for your media to save!
Interactive graphic examples
Before and After Images
One of the easiest ways to make an impact with the Reveal section is a before and after graphic. All you need is two versions of the same image!
1. Select your two images. Some examples could be day/night, or black and white/colour. Or, create your preferred assets (e.g. empty box/box full of items, or old version/new version).
2. Add a Reveal section and upload your assets by selecting "Edit Background Media”.
3. “Delete All” from the media panel that populates.
4. Insert your two images.
5. As always, double check they're in the right order!
6. Select your preferred transition how the images transition by clicking on the two-barred “Image Transitions” icon between the images.
7. Click "Done" and wait for the media to save!
Highlight Area(s) of an Image
Sometimes you really want to draw attention to a specific part of a photo or graphic. Our Scrollpoints section is one way to do this, but you can also do a little magic in Photoshop so that a stationary image lights up, drawing attention to certain part. Here's how to do the latter: