Parse after effect to animations exported as json?

Thank you for creating Shotstack,

I have a question: Can I use the library on Lottie Docs when parsing After effect to animations exported as JSON?

Although you have a guide to use luma matte to create a transition, when I use after effect, I want to use the extension of Lottie Docs when export it to JSON and use it quickly for Shotstack without converting transition to video, such as mp4…

Thank you very much

Hi huuson9x,

Lottie is currently not supported, but I’ve added it to our feature requests.

We do support transparent animations built in After Effects, but you’d need to export the motion graphic with alpha transparency and include it straight into the JSON as a video asset.

{
    "timeline": {
        "background": "#FFFFFF",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.amazonaws.com/motion-graphics/stock-market.mov"
                        },
                        "start": 0,
                        "length": 3,
                        "fit": "none",
                        "scale": 0.5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1900,
            "height": 1280
        }
    }
}

We would most likely need to convert the Lottie animation back in to a video format before including it in an edit so if you have the original After Effects file it would make more sense to export it as a QuickTime mov file.

I also found this tool which can convert a Lottie to mp4 file using Puppeteer (headless browser): https://awesomeopensource.com/project/transitive-bullshit/puppeteer-lottie

I think you would lose transparency and I’m not sure this would be a very efficient approach.

You can scale and position video clips using Shotstack if you wanted to position animations over another video, i.e. to create stickers or overlay animations. The source needs to be video however.

1 Like

Hi there! @dazzatron have you guys implemented Lottie library in the end?
Any way to get lotties files transparently in shotstack? we have logos, icons, … animated that we’d like to add, nothing was done on after effect.

Thanks!

Hi Vince,
At the moment you can not import a Lottie file. We don’t have any immediate plans to add this feature right now but maybe in the future.

For now, you would need to convert the Lottie animation to a mov animation file with alpha transparency. You would need to import the Lottie in to After Effects and then export as a Quicktime Move with animation codec and alpha channel.

I found this thread which explains how to import Lottie in to After Effects: How to get from a lottie JSON --> back into After effects - Lottie Plugins - Let's talk Lottie

And also this video on YouTube: Import LOTTIE Animations Into After-Effects and LEARN - YouTube

Once you have the mov file you can use it like any other video using the video asset and make sure it is in a track above what you want to cover.