bodymovin / bodymovin-extension

Bodymovin UI extension panel

bodymovin-extension

Bodymovin UI extension panel

Development

1. Setup AE for debugging extensions (guide)
2. Install the CEF client you'll need for remote debugging
3. Install extension dependencies (npm i)
4. Install server dependencies (cd bundle/server && npm i)
5. Run npm run start-dev
6. Open the CEF client and navigate to http://localhost:8092

The extension window will now hot-reload and you can use the devtools in the CEF client.

bodymovin-extension's Issues

Rendering fails if the "Render Queue" isn't empty

This is mentioned in #14 (comment) and #29 (comment), however, I feel it doesn't stress the severity of this issue.

It took me a couple of days to realize what was happening, because renders would fail occasionally, depending on where / how I obtained Ae-Project files.

If this problem exists, there should be a warning / error message about this situation.
If it can't be tested for programmatically, it should be reported as possible cause when the render fails.
Ideally this issue wouldn't exist at all, with bodymovin being able to work even if the "Render Queue" isn't empty.

"debugger" not working

It's not working in Developer Tools when I use the keyword of debugger
file path: bundle/jsx/utils/sourceHelper.jsx

Use "Import Lottie Animation", textLayer's text is garbled

bodymovin version: 5.7.3
After Effects version:17.0.5（Simplified Chinese version）
And my text in data.json is utf8 encoded Chinese.
Is this a known issue?

Bodymovin stuck on exporting sequence

Hi there I made an C4D sequence and tried exporting it with Bodymovin in AE 2019 as a Lottie JSON.. but it repeatedly gets stuck around frame 120 of 244. Does anyone know how to fix this? (My first time using bodymovin and it hasn't worked yet)

After Effect 2015 Blank Panel

Hello,

I want to use bodymovin but, when I go on "windows>extensions>bodymovin" a blank panel is opening. After resizing and waiting nothing happens.

• I installed it with an zxp installer.
• I also added the "playerdebugmode" registrykey.

Can anyone help me out?

How to optimize After effects for export?

Problem: after exporting from after effects to Lottie via Bodymovin,
I'm getting this error report from Google Page Optimizer:

I basically imported from Adobe XD to After Effects.
I'm thinking on possible causes:
XD is not generating optimal SVG files. Possibly need to simplify them manually by reducing the code and nodes.
Too many nested comps and layers in After Effects

Failed to read the 'responseText' property from 'XMLHttpRequest' (bodymovin)

Uncaught SyntaxError: Unexpected token '<'
This is the error which comes after this code:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.js"></script>

var animation = bodymovin.loadAnimation({
container: document.getElementById('anim'),
renderer:'svg',
loop: true,
autoplay: true,
path: 'data.json'
})

Reply ASAP

how can i make this in TGS?

Unable to execute scripts at line 226

@bodymovin I've been getting an error in bodymovin and I can't seem to resolve it.

Unable to execute script at line 226. After Effects error: Error in output for render queue item3; output module 1. Directory does not exist:

https://www.dropbox.com/s/vtuvc35lixds78y/Screen%20Shot%202018-07-26%20at%2011.29.36%20AM.png?dl=0

Bodymovin renders animation but nothing shows when viewed - Update: resolved, but animation has lag

Hello,

I made a generate stroke path to animate a reveal of some text. when rendering in Bodymovin it completes the render and outputs the JSON file but nothing shows when I try to use it or preview it on http://lottiefiles.com/preview .

I have included a mov file of how I'd like it to look, the AEP file and the JSON file outputted by Bodymovin

Thanks for your help, and for creating such a great plugin!

Update: Managed to get it to work by converting text to vector shape by right clicking > create > convert to vector shape. However there is lag towards the end of the animation.

animation attempt.zip

Alpha inverted track matte contents showing in .json

Hi,

Love what Bodymovin makes possible, thanks!

Sure this is an issue on my end, with the way I'm setting up my AE layers, but when I run the .json file on my web page, the masking track mattes (Alpha inverted) show up as black strokes, even though they're hidden in the comp.

I think the issue might stem from using a stroke width animation to reveal each letter the way I want to (a build from inside to out).

I've seen past advice about adding a transparent rectangle, but can't work out how to apply this on my layers tbh!

Thinking it would be better to create a mask layer, but can't work out how to animate that from inside to out in the same way as using a stroke width tween, especially as you can't stroke a mask layer directly in AE.

(I've also tested a different approach on a 'z' with a mask on a text layer with stroke effect - no joy either)

Any help appreciated! Comp attached.

Track matte issue.aep.zip

how to save sticker after build

hi
i'm create sticker
but
But I do not know how to save

Will you update repo to 5.5.0 version?

Hi, I see that on lottie-web repo there is v5.5.0 bundle included? Do you plan to update sorce code repo also?

Include in json export not working

Hey! I've really enjoyed using this plugin over the past few years, it's been a great way to include animations in projects.

Recently came across something that seems like a bug. When exporting compositions with images the option to include assets in the json file used to convert the image to json. This was working a few days ago but now no longer works. Instead, it links to an external image instead of converting it.

Thoughts?

[bodymovin-extension y ZXP Installer.exe] instalacion fallida AYUDA!!

Hola... alguien que me diga que versión de la aplicación o extensión necesito para que esto funcione?
instalacion fallida porque la extensión no es compatible con la aplicación instalada

• ZXP Installer.exe v0.25.3.0
  bodymovin-extension

• bodymovin-extension-5.5.2.zip
  bodymovin-extension-5.5.2.zip

• bodymovin-extension-5.5.2.tar.zip
  bodymovin-extension-5.5.2.tar.gz

• bodymovin-extension.tg.zxp
  bodymovin-tg.zip

Descargados de este mismo servidor...

Weird issue with the letter "E" in names

Hi, I'm not sure if this is the right repository (this issue is related to the JSON exporter, not the Lottie player), but I've found an interesting bug.

I converted some text to a Shape, applied a gradient fill to it and then exported the JSON file. Somehow, the gradient got messed up on one of my letters ("E") and turned into the default black-to-white gradient.

Renaming the "E" layer to something else fixes that, so I'm guessing this particular letter being present in the layer name is what's causing this issue.

I'm attaching the AEP and the exported JSON below.

badGradient.zip

bodymovin-extension 4.8.0 export image not working

I'm use new .zxp（lottie-web/build/extension/bodymovin.zxp） and it can export image
bodymovin-extension, this version is 4.8.0，So I suppose it no upgrade to 5.5.7

Dev mode can't export image

When I export composition which has image layer use npm run start-dev，It will stop there.

Bodymovin not rendering Adobe Effects Animation

Dear Github,

I created a starbust animation in Adobe After Effects. See attachment.

When I render it, it shows only a purple color, and no animation.

Could you please check what I'm doing wrong?
Regards,

Pim Broskij

Qvonda_6.zip

AVD file ending earlier than the actual animation

Hi,

I used an animation from the lottie files and got lottie and avd exports from it. I used bodymovin to get the avd export. However, the animation is ending earlier than what I have on the AE file. I tried a few times to and the results are the same. The lottie export works fine, but the avd is not. I'm just newly starting to use the bodymovin extension so is there anything I can do, do you have any suggestions?

B&W Gradient problems - not related to AE Language

I have a problem trying to export a gradient layer where the gradient turns out to be black and white and lacking all transparency... My AE installation is in english so I don't know what to event try to fix it....

Here is the AEP
money.aep.zip

Please help!

export text layer with incorrect char shape path data

when i inspect data.json, i found someone has error path data.

this is lottie render screenshot

and this is my .aep file
text.zip

After Effects version:17.1.2（Simplified Chinese version）

Why is image not showing in Json file after exporting from after effects??

I've attached the json file that I created from after effects. Used bodymovin to create the animation that I'm placing on my website. Everything is working except the images are not showing. Any help would be amazing!!

LoganFade 3.json.zip

Error with animation (skipping frames)

i am trying to export my animations as Lottie JSON files but with most compositions i have animation errors (skipping frames)
i am using the latest available version of bodymovin on aescripts which are Bodymovin 5.4.2 on After Effects version CC 2018
please help me identify this issue, i've uploaded the lottie files exported and the Aep file.

Lottie.zip
Arabic words Composer (Lesson 5).zip

Thanks for the amazing efforts

Blacked blank window when lauch Bodymovin

Hello!
Have a problem couldn’t find a solution.
When I’m launching Bodymovin plugin, only blank black window appears.
What it may be and how can I fix it?
After Effects cc 2018

Many thanks!

Me

Feature request: Expose collapse transform/cont rasterization param for layers

Please.
Thanks!

debug mode can't log

Enter react app in localhost and 8092 port. then open the console
Help! I have no idea how it was!

Hello sir. I got a problem with bodymovin. Please help me.

When i tried to click render button. the progress gone.
But data.json file did not generated and bodymovin status is "Experting images".

Stale properties for certain effects

Under specific conditions, exported properties for certain effects do not match the AE values. So far I've seen this happening for "Levels" (ADBE Easy Levels2) and "Hue/Saturation" (ADBE HUE SATURATION).

Identified trigger conditions:

• the effect is applied inside a precomposition
• the AE project is freshly (re) loaded

Since Bodymovin uses the same approach to export all effects data, I kinda suspect this is a problem in AE's JSX/data binding layer.

One workaround I found is to manually open the effect options panel (essentially just double-click the layer effect) - this seems to ensure the correct effect property values are visible for subsequent exports.

E.g. see attached project:

• one precomp red solid layer, with a Levels effect
• the only modified effect property is "Output white: 0.0" (smash colors to black)
• thus, the correct rendering is a black rectangle

Steps to repro:

• load the attached AEP
• without expanding/opening the precomp effect, render "comp" to JSON
• note that the "Output white" effect property is incorrectly set to 1, instead of 0
• open "precomp" and double-click the Levels effect (Red solid layer)
• re-export "comp"
• note that "Output white" is now correctly set to 0
  stale_effect_data.zip

Installation failed

Installation failed because the extension is not compatible with the installed applications.

win 1909
After Effects 2020

Second layer (reversed keyframes) not showing up when exporting?

Hi! I seem to be having an issue with the second half of my animation exporting properly through bodymovin
The first half works fine and looks great, but I had duplicated the layer and used time stretch to reverse the keyframes to reverse the movement of my character and it doesn't seem to pick up the second layer at all.
Still kinda new to this! Am I doing something wrong?
photographer.aep.zip

Thank you!!

JSON file not matching with the animation in ae

@bodymovin hello, I was trying to export a simple blob animation as such using bodymovin plugin from ae, but the final JSON file seems not matching with the animation that I wanted. I rendered with a demo(HTML) and it's absolutely frustrating such as images. (It became flatten) The composition is 3 blobs moving for 10 sec, and 1 white text on the top with the drop shadow. Please advise me!

Making it easier to process multiple compositions

We have an AE file that is generated automatically, with multiple compositions. When we open the Bodymovin extension to export them to Lottie, the following steps are a bit tedious:

• we need to click and select each comp
• we need to set the Destination Folder for each comp
• in the Destination Folder dialog we need to set the correct name for each comp as it defaults to data.json

A way to select all comps and a way to set the destination folder for all would be really helpful. Also, we couldn't get the "Use comp name" option to work, could you let us know how that is expected to work? Thanks a lot.

Document how the "Reports" feature works

I'd have thought that the "Reports" feature would report failures during export (such as #57 or unsupported features). However, my report always remains empty.

The "Import Report" button also implies a different workflow.

What is the "Report" feature meant for? What does it do? When to use it?

Gradient fills create transparent layer when exported

Created gradient fills on shape layers, when I export, the gradients in the animation go invisible and create a transparent layer and shows the background of the animation.

incorrect ae composition for text animation

Hi,

I am trying to export my after effects composition to .json using bodymovin. When I try rendering my text animation, my layers appear scrunched together. The bodymovin preview mode also stopped working so I've included screenshots of my original .ae file as well as a screenshot on how the animation appears post-rendering.

Support After Effects 2020

Last release of bodymovin for telegram stickers doesn't work on AE 2020
Please add support AE 2020

Automatic "Convert expression to Keyframes" export option?

I was wondering if exposing an automatic expression conversion to keyframes (baking keyframes) was ever considered as a potential export option/setting? I assume something similar to this, but for any property could suffice? airbnb/lottie-web#901 (comment)

Thanks again for the awesome work on this extension. Feel free to close this non-issue issue!

Problem to 3D export

Use rotation 3d object (coin) in video animation and reverse side is mirrored during using already generated code. Also receiving error with "You're using a 3D camera" and we try html render but it gave empty results.

3D 2.zip

bm_eventDispatcher.log(comp) report error

Hi~
How do I print data what comp include?
I'm really want to know.

Issue with exporting AE animation

I keep trying to export the Serving Platter Comp or Serving Platter Animation, and the animation continuously renders as blank. I checked the supported features and everything I'm doing in the animation is supported, so I'm not entirely sure what's going on. I'm not too familiar with coding, etc. so I'm not sure if I'm missing something. Below I've attached my AEP file and the exported JSON for the Serving Platter.

Copia Connect - Icon Animations.aep.zip

data.json.zip

Installation failed

I am getting this error:

Adobe After Effect 2020
macOS Mojave

How to Debug in PlayerDebugMode

Hi, I want to add some new features in bodymovin. So I opened PlayerDebugMode and moved bodymovin-extension folder to ~/Library/Application Support/Adobe/CEP/extensions. But it didn't work. I could not find "Bodymovin" in AE-> window->Extensions. I think manifest.xml is in a wrong path. Please help me. Thank you.

Unable to setup on local machine!

Hi @bodymovin ,
I cloned, install all dependencies and tried running this project with yarn start and yarn start-dev. However, I am getting an error while running locally. Below is the error that I am getting.

(index):9 Uncaught ReferenceError: require is not defined
    at (index):9
(anonymous) @ (index):9
CSInterface.js:445 Uncaught TypeError: Cannot read property 'getHostEnvironment' of undefined
    at Object.<anonymous> (CSInterface.js:445)
    at __webpack_require__ (bootstrap 6df4f1cbce6922b8a831:555)
    at fn (bootstrap 6df4f1cbce6922b8a831:86)
    at Object.<anonymous> (CSInterfaceHelper.js:1)
    at __webpack_require__ (bootstrap 6df4f1cbce6922b8a831:555)
    at fn (bootstrap 6df4f1cbce6922b8a831:86)
    at Object.<anonymous> (CompositionsProvider.js:1)
    at __webpack_require__ (bootstrap 6df4f1cbce6922b8a831:555)
    at fn (bootstrap 6df4f1cbce6922b8a831:86)
    at Object.<anonymous> (Render.jsx:10)

Thanks in advance.

got an error when processimage

ae version: cc 2019

hello sir:
Please help me. debugger log the error when extension start:
Failed to load resource: net::ERR_CONNECTION_REFUSED [http://localhost:3119/ping/]

when call imageProcessHelper.js/compressImage, the debugger report an error:

This repo's manifest.xml points to AE version <= 16.9 (not 17.0)

Hi hernan,

I wanted to do a pull request for this and update the manifest.xml's like so:

            <Host Name="AEFT" Version="[13.0,99.9]" Port="8093" />
            <Host Name="AEFX" Version="[13.0,99.9]" Port="8093" />

Because this repo currently reads at AEFT <= v16.9:

            <Host Name="AEFT" Version="[13.0,16.9]" Port="8093" />
            <Host Name="AEFX" Version="[13.0,16.9]" Port="8093" />

I noticed the installed ZXP from aescripts was already updated:

            <Host Name="AEFT" Version="[13.0,17.9]" Port="8093" />
            <Host Name="AEFX" Version="[13.0,17.9]" Port="8093" />

We're now on AEFT v17.0, which might explain the influx of Issue filings lately about the extension install failing assuming the source is coming from this repo or a slightly old download from aescripts. I noticed that my new fork of this repo shows v5.5.5, whereas a semi-recent aescripts.com download ZXP shows v5.5.9.

I'd like to do some maintenance and pull requests to the panel, like fixing the UI themes to dynamically match the host app exactly (I have an npm package exposing CSS variables for this). Can we verify this repo is up to date with the latest version and commit?

where is bodymovin? :)

what happened? is something trouble happened??

How to pack and debug bodymovin-extension?

How to pack and debug bodymovin-extension, it looks so different from standard CEP extension

Update bodymovin extension in the Creative Cloud / Adobe Exchange

While trying to resolve #57 I tried to upgrade my bodymovin extension, but the Creative Cloud / Adobe Exchange is stuck on 5.7.1 (April 2019).

The latest version mentioned in git at the time of writing is 5.7.3 (September 2020; but I'm not sure if it's considered "released" yet).

I'm not sure about the changes in 5.7.2 and 5.7.3 but it would probably be good to have these changes in Adobe Exchange.