Animated GIFs are a great way to hand off an animation as a single file that works all over the web (though notably not in a PDF).
A few great use cases for animated GIFs are
- Email newsletters (which don’t support complex content)
- Banners & ads (when HTML5 is not needed or supported)
- Social media images (e.g., for Twitter, Facebook, and Linkedin timelines)
Thus far, the best way for a creative to create an animated GIF was to
- Open Adobe Animate
- Create animations using tweens
- Export as video
- Open the video in Photoshop (because Animate doesn’t do a great job with the colors)
- Export as a GIF using the Save for Web dialog
That process is okay if you’re fairly comfortable with both Animate and Photoshop, but it’s a bit convoluted even then (created the tweened animations, especially).
I recently opened Adobe Animate, which was formerly Flash Professional, to create an animated GIF. Even though I lived in Flash Pro for years, it still took me a half hour to create a simple 125 x 125 pixel ad.
Don’t get me wrong, Animate is great if you want fine control of your animation, but sometimes that’s overkill.
Why use InDesign?
In comparison, InDesign’s animation tools are superbly easy: simply apply a motion preset (adjust if needed). No keyframes, no timeline.
If you just need some simple fades and fly-ins this InDesign workflow is ideal.
The main limitation: There hadn’t been a way to export InDesign’s animation as animated GIFs, but now there is.
How to Create an Animated GIF using InDesign
Here’s a quick outline of the steps.
- Create a new file in InDesign. in5 v3.5.1 comes with a convenient Social Media Image document preset.
- Add a Motion Preset via the Animation panel (Window > Interactive > Animation). Adjust and repeat with other items if desired.
- (Optional) Adjust the sequencing of multiple animations using the Timing panel (Window > Interactive > Timing).
- Export using in5 (in5 > Easy Export Wizard).
- Open the exported content in Google Chrome and use the in5 Animated GIF Maker extension to record and save your GIF.
You can now share the file via email or via social network updates.
Check out the steps in the video below.
You can test this out using a free trial version of in5.
The in5 Animated GIF Maker extension is available for free in the Chrome Extension Store.
Check out the GIF Maker Extension
Get updates from Ajar Productions
Sign up today and get the InDesign Split Text premium extension for free!
It appears that the extension isnt working as followed by this tutorial. The In5 gif maker extension is appearing as grayed-out after I perform the In5 export and open in default Chrome browser. Strange because it becomes active (turns orange) when I flip through my other Chrome tabs. So, its like its not recognizing it as In5. I’m new to In5, so I may be doing something wrong, but I believe I followed the tutorial exactly. I’m on a mac w/ current Indesign, current In5 and current Chrome browser.
It looks like if you’re running the extension on a local file, you need to go into the Extensions (click on the icon and choose Manage Extensions), then go into the in5 Animated GIF Maker and choose Details, then turn on “Allow Access to File URLs.”
I’ll see if I can turn this on by default in an upcoming version.
Hello, I have added an animated gif into indesign and exported it via the in5 export, but it is not loading when viewing in chrome, I am using the demo version at the mo, can you confirm that gifs will work in the full version?
It created simple animated GIFs just fine for me after following Justin’s instructions. But, I’m not sure if you are saying that you want to take an actual animated gif and pasted it into InDesign or if you indeed created the animation in InDesign. I created mine in InDesign and it worked ok. Pre-made ones I do not know about.
Hi Chris,
Please see this article:
https://ajar.freshdesk.com/support/solutions/articles/26000036415-animated-gifs-don-t-appear-animated-in-the-output-does-in5-support-them-
i have added the extension to chrome and made the gife in indesign but that option you have in indesign top bar of in5. that is not there. how will get in5 option in indesign
Same Problem I have, is there any solution?
You will need to install (and license) in5:
https://ajarproductions.com/pages/products/in5/download.php
I have watermarks when I export files into gif format.
How can I remove this?
You have to purchase a license for in5 to remove the watermarks:
https://ajarproductions.com/pages/products/in5/purchase.php
HI. i just create my animation but I can’t convert it into a gif., as your youtube video. is it because I am on the trial version?
No, you should be able to test it with the trial. Send us your files and we’ll look into it for you:
https://ajarproductions.com/pages/contact.php?category=in5&software_issue=bug
Hi Justin,
thank you for your quick reply.
I looked at reply you did to some else and tried it and it worked for me.
I noticed that my on second test, i have watermarks behind some items. is this normal? or should I start from scratch?
Glad to hear it. Watermarks are indeed part of the demo. They can be removed by licensing in5, and re-exporting your output.
Hi Justin, can I get only one month subscription?
Yes, just make sure to choose a Monthly plan (they’re annual by default) then contact us when you want to cancel.
Hello – Just wondering if you can use multiple pages when creating InDesign Animated Gifs… you example showed a single page only.
Thanks
Hi Mellanie,
Good question. Single pages only. But you can create a slideshow using the in5 Slideshow Widget to change the content of a Multi-State Object. This could appear like a page change.
Too bad there’s a watermark as restriction. You could have chosen for something else, this way I can’t demo it to my clients…
Sorry. If there wasn’t a watermark, then there’d be no incentive to purchase the full product. 😉
Is there a way of exporting without purchasing another software/plugin straight from Indesign? Thanks!
Hi Vicki, Nope. That’s why we created this Chrome extension to work with in5. 🙂
You can always export to Publish Online or Fixed Layout ePub and use screen recording software to capture a video.
I’m struggling with exporting this. I’ve built an animated gif which should have about 10 (simple) animations happening, but only one of them is appearing. I’m working with the full version.
We’re happy to help. Please contact us and share your file so that we can troubleshoot with you. https://ajarproductions.com/pages/contact.php
Thank you for sharing this valuable content, it is very informative and informal. I hope you keep updating us.
I would want to express my gratitude to you for sharing this important tutorial, I have been looking for this for a long time. I will share it on my page.