Skip to main content

Image Sequence

Jan Meuser avatar
Written by Jan Meuser
Updated over a year ago

Unleash your creativity and bring your ad to life with the Image Sequence Module, a dynamic tool designed to seamlessly playback sequences of images to create captivating animations and effects. With this module, users can upload folders of assets that will be played back in sequence, allowing for the creation of stunning visual narratives. Customize playback options such as frames per second (fps), looping behavior, and playback direction to achieve the desired animation effect.

Use cases

  • Animated CTA's, Backgrounds, and more

  • Create flashy effects with transparent backgrounds that stun the user

  • Expand on what you can do with the timeline and normal animation capabilities

Example

This simple example shows how you can create a fake 3d effect with an image sequence and link a slider module to it to control it. Of course, image sequences can also play automatically, but this is a nice way of bringing some interaction possibilities to your users!

As with all examples, you can request us to copy them over to your company so you can look at how they are built in detail.

Source folder

You start by dropping a folder of assets here. The assets inside will be ordered by alphabet, so ideally they have the same name but differing numbers in the end - e.x. "anim1.png, anim2.png, anim3.png"

Responsive options

You can change the responsive behavior of the image sequence with these settings you already know from the Background and asset modules.

Direction

You can change between forward & backward animation playback direction, meaning that you can also play back an animation in reverse.

Yoyo

The yoyo-effect will play the animation in the direction you specified first and then reverses through the animation in the other direction. It can also be combined with loops so you can have something like a box opening and closing repeatedly.

Autoplay

You can toggle the automatic playback of the image sequence. Alternatively, you can trigger the animation through interaction events.

Loop

You can loop the image sequence for a specified number of times between 1-10 or you choose the last option "Unlimited" so it'll loop until the killswitch for animations (by default 30s) is triggered.

FPS

You can change the FPS with which your animation will play back here, between 1-60. This will also determine how long your animation playback will be, as more fps means a shorter animation if the amount of frames stays the same.

Properties & Clickout

As for the Background module, the Basket module allows you to change different properties like the opacity seperately in the "Properties" tab.

Also, you can set up a clickout link for the Basket module as usual.

Interactions

The Image Sequence offers all standard triggers & actions that the Background module offers as well. Furthermore, the Image Sequence module offers:

Triggers

  • Sequence finished = Triggers when the image sequence has finished playback (after all loops are finished in case looping is active!)

Actions for other modules

The Image Sequence module offers actions to be triggered by other modules:

  • Play image sequence = Play an image sequence - will continue playback if it has been stopped in the middle

  • Stop image sequence = Stops playback of an image sequence

  • Reset image sequence = Resets an image sequence to the first frame of playback

Did this answer your question?