If you’ve ever wanted to animate a picture, simulate a 3D image, or bring a series of static images to life inside an interactive layout, Adobe InDesign alone won’t get you there. But paired with in5, you can easily turn a series of photos into an image animation—ideal for product demos, training materials, or digital publications.
This solution uses image sequences: a series of JPGs or PNGs exported from Photoshop or another app, then displayed in succession to create the effect of movement.
Follow these steps to create your animated image sequence:
1. Export your image sequence from Photoshop
- In Photoshop, go to File > Export > Render Video...
- Under Location, choose your export folder and name prefix.
- Under File Options, set:
- Adobe Media Encoder, change to Image Sequence
- Format, Select PNG or JPG (PNG is recommended if transparency is needed)
- Set your Frame Rate (eg 30 fps or 24 fps)
- Ensure Range is set to All Frames
- Click Render and Photoshop will export a series of sequentially numbered images to the folder you chose.
2. Insert the Image Sequence into InDesign Using in5
- In InDesign, go to in5 > Interactive Widgets > Image Sequence
- Use the Rectangle Frame Tool to draw a placeholder for your animation
- Click the folder icon (...) to select the folder that contains your exported images
- Adjust playback settings as needed
- Show first image initially
- Swim to change image
- Enable autoplay, looping, or ration if desired
Note: Image sequences cannot be resized after placement, so it is best to size your placeholder frame first.
3. Export your Project with in5
- Use File > Export HTML5 with in5
- Your image animation will be preserved in the exported HTML5 output and ready for interactive web use.
In this video from our YouTube channel, Keith Gilbert demonstrates how to use an image sequence in InDesign and in5 to create an interactive 3D image demo.
More can be seen in the Create a 3D Product Demo course.