Request for animated number counter script

Question

I am reaching out to inquire about the process of creating an animated number counter in in5. As part of a project I am currently working on, the implementation of these counters is required in multiple locations. I was wondering if you have a script or a more efficient method that could help streamline this process. Thanks in advance!

Comments

Hi Ingrid, there are many ways you could approach doing a number counter. What do you need it to do in your project?

---

Thank you for your response. I need increasing numbers for animated infographics. Sometimes they are percentages; sometimes they are also numbers in millions. I could create it with a multistate object and slideshow, but I was wondering if there might be a script where you could specify a start and an end number to animate from one number to the other. And where you can also choose whether it should increment by single units, tens, hundreds, etc. Such widgets exist for HTML, so I was hoping there might be a script for this as well. Thanks in advance.

Answer 1

Hi Ingrid, 

Ajar Productions does not have an animated counter script.

However, as Maurice mentioned, there are many ways that you can add a number counter besides using a multistate object and slideshow:

1. Use an HTML widget and embed it in your layout
   • in5 Web Content Interactive Widget
2. Create the counter in Adobe Animate or Tumult Hype, publish an OAM file, and place (File > Place...) the OAM file in your InDesign layout
   • Adding Animation from Tumult Hype or Adobe Animate to an InDesign + in5 project
3. Add a Lottie file
   • https://lottiefiles.com/free-animations/counter
   • Adding Lottie animations to your in5-exported content
4. Incorporate a script or CSS that you find online
   • Extending Functionality with External Resources

Comments

Hi Myra, thanks for all the useful info. I will find out what is easiest for me to work with, because I have no experience with Adobe Animate or HTML at the moment. Maybe I should take an AE course after all, but that seemed quite complicated to me.

---

The pre-made Lottie animations may be the easiest way to go.

After Effects (Ae) is another good option. You could render an MP4 and place it in your layout or render an image sequence and use the in5 Image Sequence widget to play the sequence:

• Adding Audio & Video
• How to insert an Image Sequence with InDesign & in5

---

I like using the video widget for this sort of thing because it allows for an action to happen at the end of the video. If you don't want to get into After Effects you could do this in Photoshop, or even do a search on a stock photo site for "numbers counting up video".

If you don't need an action at the end, an image sequence would be great too--also easily exported from a Photoshop video. That way you could copy all the numbers you need from a folder into a new folder named with the total number. That would be just as fast as tweaking a javascript and you'd have more control over the look and feel.

---

Great ideas, Maurice--especially for using a stock photo site! Adobe Stock includes a wide range of videos of numeric counters (both free and paid).