The 3D Images feature enables you to create engaging 3D images from static images, adding a new level of dynamism to your stories.

A 3D image will appear to zoom as you scroll, creating a visual 3D effect that brings the image to life. You can also create special effects with text, e.g. having a title appear from behind a mountain.


Creating 3D images

3D images are available in both Title and Text-over-media (TOM) sections.

There are two ways to create 3D images in Shorthand. The simplest way is, within a Title or Text Over Media section, open the image edit panel and select the “3D Images” tab at the top.  You can then choose to upload an image or select one from Unsplash.

If there is already an image in your Title or Text Over Media section, you can convert it to a 3D image by opening the media panel and clicking the text "GENERATE 3D IMAGE" :  

Generating a 3D version of an image may take up to 1 minute.  

Setting the ‘text depth’

In a section with a 3D image and text, it's possible to have the text appear in front of the image, or at a simulated depth within the 3D scene: where parts of the image foreground appear to be 'in front of' (or closer to the viewer) than the text. 

To set the text depth, in the main editor window, drag the slider on the left of the screen.  An overlay between elements of the image will indicate where parts of the image will mask the text, and you'll see the text appear to move further 'back' in the image.  In the illustration below, the text is moved 'back' to appear from behind the car:


Effect options

Multiple effects are available for 3D images that control how, and how much, the image moves as your readers scroll through the story.  These settings are available as sliders in the 'Section Options' panel on the left of the screen. The effects are most clearly visible to readers when the setting 'BACKGROUND EFFECTS' are set to 'Sticks' as shown below:


The effects:

  • DOLLY simulates moving a 'camera' or the viewer closer or further away from the scene.
  • ZOOM simulates a camera zoom operation (adjusting the lens rather than moving the camera physically closer to the subject)
  • PAN directs the view left or right
  • TILT directs the view up or down
  • DOLLY ZOOM (activated by clicking the crossed arrow icon between the DOLLY and ZOOM sliders) links the two effects so that the one moves out while the other moves in. 

The effects can be applied individually or in multiple combinations.  It's important to check your applied effects in a preview of your story to ensure the results are satisfactory and that the image motion doesn't produce any unwanted movement or image artifacts.


Reverting back to a 2D image

If you aren't happy with the 3D image effect, it's easy to turn the image back to a static 2D image by again opening the media panel and, above the image, clicking the text "RESET TO STATIC IMAGE":


Media guidelines

For best results, we recommend using images:

  • that have clear contrast and separation between foreground and background areas
  • that have a shallow depth-of-field (e.g. the foreground is in focus, but the background is blurred)
  • where the main subject of the image is in the foreground and/or is not obscured by other foreground elements
  • that do not contain multiple straight lines


Additional tips

  • Preview your story on both desktop and mobile devices before publishing to ensure it achieves the result you want. In particular, check for unexpected or unacceptable text positioning (as this may change based on the aspect ratio of the device), and for unacceptable visual artefacts, especially around the edges of important parts of the image and the edges of the view.
  • Try to limit the use of 3D images to a maximum of eight per story as multiple 3D images may increase load times and impact your readers' experience.
  • Try to avoid adjacent 3D image sections, as this can negatively affect mobile performance.
Note: This feature is not supported in IE 11 or IE Edge (Classic). On those and other older browsers the static image will be shown.