The Image Sequence component

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.

Use Cases

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, 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. 

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. 

Trigger Events

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

Choose from the following triggers: 

• Start playback
• Pause
• Stop playback
• End playback

Interactive Actions

You can also add an action to your Image Sequence. Choose a trigger and the action Act on 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 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. 

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 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 to optimize the weight of your animations. 

Examples 

• Create a 360° Product Viewer
• Control an Image Sequence with Your Finger