Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked.
It doesn't work for me always 1kb empty files generated. I tried with every format and tutos and nothing work for me. I tried to export a video with transparent bg, impossible. Then I did a png sequence and impossible to have something
Thanks a lot. This tutorial was exactly what I was searching for. Embeding the rasterize files is the way to solve most of the Bodymovin output problems. Thanks again.
exporting the PNGs gave me a headache today, I'm gonna give another shot with your advice... It was the last version of bodymovin, used an old one and now everything is ok
After 5 hours of downloading, failed installs, getting missed by third-party installers. I could never get a .json exported via bodymovin out of AE to show in HTML. The AE file was just text and it failed.
Hello Sarah, very nice and useful clip. Cool to know about this optimizing app. Just want to ask you, when I click the option to include assets(jpgs and pngs) from my comp to bodymovin json file. It does not include them. If i choose not to compress them but to include them in the json file then it goes through the render but does not include my jpgs. Then if i select compress the assets and include then the render of bodymovin gets stuck on the first asset jpg it comes along. And does not render. Any help would be appreciated. Thanks
How peculiar! Here's a few questions to ask for troubleshooting: Are there any effects on them and if so, what are they? What size are the files and how many of them are there? Is it possible to combine your assets into a single PNG? Are there masks on them? You could try putting them in their own precomp and only animating the precomp (and not the photos themselves, since they'll be nested inside the precomp. I've done this for similar reasons and it's worked in the past).
Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked.
Hi. Sarah, Thank you for leading the way in expanding the possibilities with Lottie. Staggering that Adobe is not supporting a simple workflow from Illustrator to AE automatically optimizing vectors and bitmaps... You've done a lot of research to make images possible. Makes you wonder what Adobe does with all the funds from subscriptions we pay them? I suppose it could be thirsty work moving the shortcut keys around. Still no properly supported export path for Adobe Animate.
Really REALLY informative video. Thank you. 🙏🏼Anyone know how to keep transparency on Json files? I know you loose this when converting over to Jpeg but I know it can be done!?
Thanks for the video. If I export the sourcefiles (png) as a .png file instead of embedding it, then it doesn't load in the demo. does anyone have any ideas?
If you have "include in json" unchecked, then all source files in your file will be stored in an independent "images" folder. Make sure your pngs are in the demo > images folder, as this is where the html demo file will be sampling those assets.
lottie animation(no masks,no effects) with imported ai vector images is not previewing but getting rendered as json in bodymovin but not previewing in bodymoving and also not previewing in lottiefiles website when uploaded as json can anyone please help
Illustrator layers aren't supported by Bodymovin unfortunately! You can turn Illustrator layers into vector shapes using the "Create Outlines from Layer" option.
@@faithless407 If you're using Illustrator files in AE, AE gives you the option to "Create Outlines from Layer", which transforms your Adobe Illustrator layers into solids with masks. This way the entire object is INSIDE After Effects and not being sampled from an external program (Adobe Illustrator).
Thank you so much for explaining the differences in image formats! It’s been really hard finding good tutorials that work for the style of animation that I want to do with Lotties. What would you say would be the easiest way, possibly from XD to After Effects and with masking to make something preferably in raster, similar to animating a sprite sheet, even a low quality one like an old 16 bit game system?
I'd say a PNG sequence from a pixel art program like Pyxel Edit would be the easiest! The file sizes are small enough to make for a small JSON. BUT if you want it to be vectorized in AE, I'd recommend exporting as SVG in Pyxel Edit, uploading into Illustrator, setting each frame to a separate layer, and then importing the Illustrator file into AE. You'd then Create Shapes From Layer (don't remember the exact wording of this tool, but if you right-click > Create on the Illustrator layer, it'll come up) and select "Composition" when it prompts between Composition and Footage. HOPE THIS HELPS!
If the presets use effects from After Effects (like dropshadows, some expressions, etc) then they won't export as JSON because it isn't supported by the json code. Take a look at this checklist and see if all the features you're using are compatible with JSON: lottiefiles.zendesk.com/hc/en-us/articles/900000997203-When-I-render-my-animation-in-the-plugin-it-doesn-t-look-like-how-I-ve-designed-it-in-After-Effects
What seems to be the problem? The most common issue I've encountered is image sequences, which we have a separate video on if that's the issue. Otherwise it could be file type or effects that are being used on the image.
@@halftonedigital9819 can you please link the image sequence video. I can't find it and am having the same problem. just a sequence of images as frames and bodymovin is failing to render the animation
@@michaelwilson2022 ruclips.net/video/TjY3rXCTOJw/видео.html The main thing to watch out for is that your file name is likely ending with a number-use letters instead of numbers in your file names.
6:29 minutes of my life have gone lost... here it goes for you guys that are in a hurry: 1. reduce de PNG with any file compressor you have. 2. when exporting to bodymovin, go to the composition settings and turn on enable compression, and include in JSON. If you don't believe me go to the minute 6:29 ruclips.net/video/H7L9HzShjho/видео.html
Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked.
It doesn't work for me always 1kb empty files generated. I tried with every format and tutos and nothing work for me. I tried to export a video with transparent bg, impossible. Then I did a png sequence and impossible to have something
I didn't even think about optimizing my photos. Thank you for such an intensive overall explanation! You're a wizard!
Thanks a lot. This tutorial was exactly what I was searching for. Embeding the rasterize files is the way to solve most of the Bodymovin output problems. Thanks again.
Thank you so much, I stuck on exporting png files... and I follow your settings then it works properly!
Same! :D
Very helpful. Lots of useful tips about bodymovin and image optimization I wasn't aware of. Thanks!
thanks so muuuuch
exporting the PNGs gave me a headache today, I'm gonna give another shot with your advice...
It was the last version of bodymovin, used an old one and now everything is ok
Very nice explanation!
very useful, thanks and well done
Thank you 👍
You are the best.
thank you, it helped me a lot! cool video
You helped me. Thanks!
Helpful! 🎉 Thank you
any idea why i can not include image squence into json? its always make its own sparate image folder ignoring include raster option.
Same here
Super helpful thank you for creating this!
Wow Thanks So Much it's work well 👌
Loved it...
WOW! Thanks ;)
i have .png files, .json files, and .atlas files too, is that possible import to after effect and make a loop animation ?
Can you export TIFF Sequences (small size) using Bodymovin? Or only PNG Sequences?
Unfortunately TIFF isn't supported, so only PNG sequences. Hope this helps!
Do I install it for the window also?
After 5 hours of downloading, failed installs, getting missed by third-party installers. I could never get a .json exported via bodymovin out of AE to show in HTML. The AE file was just text and it failed.
Thanks a lot
Hello Sarah, very nice and useful clip. Cool to know about this optimizing app. Just want to ask you, when I click the option to include assets(jpgs and pngs) from my comp to bodymovin json file. It does not include them. If i choose not to compress them but to include them in the json file then it goes through the render but does not include my jpgs. Then if i select compress the assets and include then the render of bodymovin gets stuck on the first asset jpg it comes along. And does not render. Any help would be appreciated. Thanks
How peculiar! Here's a few questions to ask for troubleshooting:
Are there any effects on them and if so, what are they? What size are the files and how many of them are there? Is it possible to combine your assets into a single PNG? Are there masks on them? You could try putting them in their own precomp and only animating the precomp (and not the photos themselves, since they'll be nested inside the precomp. I've done this for similar reasons and it's worked in the past).
Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked.
Hi! Can i use this animation on android studio project?
Hi. Sarah, Thank you for leading the way in expanding the possibilities with Lottie. Staggering that Adobe is not supporting a simple workflow from Illustrator to AE automatically optimizing vectors and bitmaps... You've done a lot of research to make images possible. Makes you wonder what Adobe does with all the funds from subscriptions we pay them? I suppose it could be thirsty work moving the shortcut keys around. Still no properly supported export path for Adobe Animate.
You save my life! thank you so much I love you
Really REALLY informative video. Thank you. 🙏🏼Anyone know how to keep transparency on Json files? I know you loose this when converting over to Jpeg but I know it can be done!?
It has to be a PNG, but if you use a JPEG, you will have to manually mask the JPEG to exclude the contents of the file you want transparent.
Thanks for the video. If I export the sourcefiles (png) as a .png file instead of embedding it, then it doesn't load in the demo. does anyone have any ideas?
If you have "include in json" unchecked, then all source files in your file will be stored in an independent "images" folder. Make sure your pngs are in the demo > images folder, as this is where the html demo file will be sampling those assets.
@@halftonedigital9819 Thanks. Yes they are in the images folder but the problem is that it don't load when I open the .html-file
@@ChristianEnzler What effects/masks/keyframes are you using on the image layers? They could be unsupported by Bodymovin.
lottie animation(no masks,no effects) with imported ai vector images is not previewing but getting rendered as json in bodymovin but not previewing in bodymoving and also not previewing in lottiefiles website when uploaded as json
can anyone please help
Illustrator layers aren't supported by Bodymovin unfortunately! You can turn Illustrator layers into vector shapes using the "Create Outlines from Layer" option.
@@halftonedigital9819 In adobe Illustrator the create outlines option is faded. So far I have used image trace on a png and expand.
@@faithless407 If you're using Illustrator files in AE, AE gives you the option to "Create Outlines from Layer", which transforms your Adobe Illustrator layers into solids with masks. This way the entire object is INSIDE After Effects and not being sampled from an external program (Adobe Illustrator).
Thank you so much for explaining the differences in image formats! It’s been really hard finding good tutorials that work for the style of animation that I want to do with Lotties. What would you say would be the easiest way, possibly from XD to After Effects and with masking to make something preferably in raster, similar to animating a sprite sheet, even a low quality one like an old 16 bit game system?
I'd say a PNG sequence from a pixel art program like Pyxel Edit would be the easiest! The file sizes are small enough to make for a small JSON.
BUT if you want it to be vectorized in AE, I'd recommend exporting as SVG in Pyxel Edit, uploading into Illustrator, setting each frame to a separate layer, and then importing the Illustrator file into AE. You'd then Create Shapes From Layer (don't remember the exact wording of this tool, but if you right-click > Create on the Illustrator layer, it'll come up) and select "Composition" when it prompts between Composition and Footage. HOPE THIS HELPS!
Why am I unable to export animation presets from AE to JSON? could someone pls help me understand..
If the presets use effects from After Effects (like dropshadows, some expressions, etc) then they won't export as JSON because it isn't supported by the json code. Take a look at this checklist and see if all the features you're using are compatible with JSON: lottiefiles.zendesk.com/hc/en-us/articles/900000997203-When-I-render-my-animation-in-the-plugin-it-doesn-t-look-like-how-I-ve-designed-it-in-After-Effects
@@halftonedigital9819 Thank you!
Hi! How do you export gif into json file?
Hi! Json doesn't support GIF, but if you export a GIF as an image sequence and turn that into an AE file, you should be able to export it as a json.
its not working bro
What seems to be the problem? The most common issue I've encountered is image sequences, which we have a separate video on if that's the issue. Otherwise it could be file type or effects that are being used on the image.
@@halftonedigital9819 can you please link the image sequence video. I can't find it and am having the same problem. just a sequence of images as frames and bodymovin is failing to render the animation
@@michaelwilson2022 ruclips.net/video/TjY3rXCTOJw/видео.html The main thing to watch out for is that your file name is likely ending with a number-use letters instead of numbers in your file names.
i just forget the video and litrally watching you all the time fak man yiu are beautiful 😅
ahm ahm...by the way thanks for the video
6:29 minutes of my life have gone lost... here it goes for you guys that are in a hurry:
1. reduce de PNG with any file compressor you have.
2. when exporting to bodymovin, go to the composition settings and turn on enable compression, and include in JSON.
If you don't believe me go to the minute 6:29 ruclips.net/video/H7L9HzShjho/видео.html