Insert a animated countdown

Hello !

I’m new to the shotstack tool which i found amazing, I have try to play a little bit with the API and I need some help understanding if it is possible and how to add a counter (countdown) to a video ?
If it is possible, what would be the right way to do it ?

thanks !

Hi Nathan,
I just put together this countdown demo, it is written in Node.js using our Node SDK: node-demos/countdown.js at main · shotstack/node-demos · GitHub

It should be pretty easy to port to other languages/SDKs (Ruby, Python, PHP). The main part is a simple countdown loop and it updates the clip start and length.

If you just want to see the JSON, you can add console.log(edit, null, 2); just before calling the API postRender method. Then you can copy the JSON to your own template if you don’t want to use the SDK.

Amazing !

Does shotstack have a possibility to use lotties ? (sort of animated image in a JSON format)
Ex: Countdown circle on Lottiefiles. Free Lottie Animation
or using a set of frame is the only solution for now ?

We don’t support Lottie files. We do support Quicktime mov files with alpha channels and it is possible to convert a Lottie file to a mov with alpha using After Effects, however it would no longer be editable like the example. There is an article here on creating overlay animations using After Effects: Create an overlay transition using After Effects — Shotstack

Another common approach you might be interested in is a progress bar. We built a demo for this too: node-demos/progress.js at main · shotstack/node-demos · GitHub.