Skip to main content

How to use an Animated Imaged

Learn how to add and customize an animated image element in your Storydoc presentations.

Written by Jack

The animated image element lets you display a sequence of images that play as a looping animation — perfect for showcasing a process, highlighting key steps, or adding visual interest to your story. Here's how to set it up.

Step 1: Select the slide and add the element

Navigate to the slide where you want to add the animated image. On the right side of the editor, look for the Add an interactive element button (the icon on the right-hand panel).

Click it to open the interactive elements panel. From the options displayed, select Image to add the animated image element to your slide.

Step 2: Manage your animation frames

Once you add the element, an Animated image dialog will open. This panel shows all the image frames that make up your animation — each thumbnail represents one step in the sequence.

You'll see preset example images already in place. To replace any of them, hover over a frame and click the edit (pencil) icon that appears. To add a new frame to the animation, click + Add image in the top right of the dialog.

Step 3: Upload images from the media library

Clicking the edit or add option will take you to the media library, where you can choose from your existing files, upload new ones, search stock images, use AI generation, or browse GIFs.

Select the image you want to use for that frame, and it will replace the placeholder in the animation sequence. Repeat this for each frame until all your images are in place.

Click Save to apply your changes and close the dialog, or Go back to return without saving.

Step 4: Preview the animation

Once all your images are added, you can see a live preview of the animation cycling through the frames directly in the editor. The frames will play in the order they appear in the dialog.

Step 5: Adjust animation settings

Once the element is placed on your slide, select it and click Animation in the top settings bar. This opens a small panel with two controls:

  • Loop — Toggle this on to make the animation repeat continuously, or off to play it only once.

  • Duration slider — Drag the slider to control how long the full animation takes to play through all frames (measured in seconds).

Drag the slider to the right to slow the animation down, or to the left to speed it up. In the example shown, the duration is adjustable between 2s and 4s.

Your animated image is now ready. Viewers will see the frames cycle through automatically when they view your story.

Did this answer your question?