# Image Sequence

> Discover the Image Sequence component in PandaSuite to create smooth animations and interactive visualizations by scrolling through a series of images. Ideal for showcasing 360° products and more.

https://docs.pandasuite.com/essentials/components/image-sequence/

**The Image Sequence component allows you to create smooth animations or interactive visualizations by scrolling through a series of images.**

This is an ideal solution for showcasing 360° products, illustrating processes, or simulating animation effects without needing to use a video.

[Image: Image Sequence of a Darth Vader helmet in a 360° Product Viewer project, with thumbnails of four angles and the component properties]

## Use Cases

- **360° Product**: Display a product from every angle to provide an immersive user experience.
- **Step-by-step animation**: Illustrate a process or tutorial with images.
- **Creative effect**: Simulate a zoom or smooth motion by alternating similar images.

## Setting up the Component

In **Components**, insert an **Image Sequence** component. In the properties panel, click the **Select** button next to **Source**.

Within the component, you can choose a source such as [a GIF](https://docs.pandasuite.com/essentials/multimedia/gif/), a video, or an image sequence. To create a sequence from multiple images, select the images from your computer and import them simultaneously into PandaSuite Studio: the order will follow your selection order.

> **Info**
>
> Your sequence must contain fewer than 250 images (approximately equivalent to
> a 10-second sequence).

> **Info**
>
> It is not possible to import a sequence directly from **Files** into your
> screen: you must insert an **Image Sequence** component first.

To edit your sequence, double-click it to enter editing mode. Use the player controls at the top left to start and stop playback.

## Component Features

### Properties

The Image Sequence offers several properties to customize its appearance and behavior:

- **Quality**: **Optimized** or **Best**; these options affect the image quality and the size of your sequence.
- **Auto-play**: By default, your sequence starts automatically. You can disable auto-play and create an action to trigger the animation manually.
- **Duration**: The duration of your sequence, i.e., the time between displaying the first and last image.
- **Loop**: Automatically restart the sequence after the last image.
- **Repetition**: The number of times your animation repeats. Select -1 for infinite repetition.
- **Default**: Choose a default frame (the one displayed when the screen loads). You must create markers first.

[Image: Image Sequence of a tulip opening: Source, Quality Optimized, Autoplay off, Duration 2 sec, Loop off, 0 repetitions]

### Trigger Events

You can use your **Image Sequence** to trigger an action. Select your component and click **Actions**.

Choose from the following triggers:

- **Starting play**
- **Pause playing**
- **Stopping play**
- **Finish playing**

[Image: Triggers of the tulip Image Sequence: Starting play, Pause playing, Stopping play and Finish playing, framed]

### Interactive Actions

You can also add an action to your Image Sequence. Choose a trigger and the action **Interact with a component**. Select one of the following actions:

- **Play/Pause**
- **Play**
- **Pause**
- **Stop**
- **Forward**
- **Rewind**
- **Change frame**
- **Go to the next frame**
- **Go to the previous frame**

## Advanced Interactions

### Markers

You can add [markers](https://docs.pandasuite.com/essentials/interactions/markers/) to your Image Sequence. Markers allow you to tag specific frames (images) in your sequence and associate actions (triggering an action, play, pause) with them.

To create a marker, play your sequence and stop on the frame of your choice. Click the **+** button. You can edit the frame, rename the marker, delete it, or set it as the default marker.

You can also generate these markers from a data source. Create one marker, choose **Enable source**, set its **Source**, then bind **Frame** to a numeric field. For the full workflow, see [Markers](https://docs.pandasuite.com/essentials/interactions/markers/).

### Synchronization

It is possible to synchronize the Image Sequence component with other components, such as Timer or Audio. Available synchronization settings include:

- **Frames**
- **Markers**

These settings can be accessed from the Properties panel of the [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) component.

## Best Practices and Tips

Using After Effects, you can export your animation as an image sequence. Be mindful of the file size for this type of animation! We recommend using [JSON export via Bodymovin](https://docs.pandasuite.com/essentials/components/lottie/) to optimize the weight of your animations.

## Examples

- [Create a 360° Product Viewer](https://docs.pandasuite.com/tutorials/how-to/create-a-360-product-viewer/)
- [Control an Image Sequence with Your Finger](https://docs.pandasuite.com/tutorials/how-to/control-an-image-sequence-with-touch-gestures/)

[Template: 360° Product Visualization](https://pandasuite.com/templates/360-product-viewer/)