Thank you! We have a lot of-perhaps too many-useful tips on jsons in the future. It's easier to work with bodymovin once all the quirks are understood.
Obrigado pelo video, não encontrei ninguém falando sobre isso em português, mais mesmo eu não entendendo muito inglês conseguir entender os ensinamentos do video.
Thank you very much for the tutorial, it really helped me too much, it is the only video I found and it worked for me. By the way, I don't speak English, but I wanted to thank you for your help. Take care, greetings.
I've recently worked on a project that involves using click targets in lottie animations, so I'll interrogate the developer about what he did to make it work. On my end, I just made a point to title the layers appropriately and end each later name with ".clickTarget" i.e. "first.clickTarget" and then created timeline tags where the first click's animation sequence is and title that timeline tag "first"
hello why my ae and this extension can not export as this tutorial? its only stuck keep rotating with no progress for hours. im using ae 2018. and version 5.8.
Hi! Super delayed reply--we have a video on masks in json files. Unfortunately, Effects aren't supported by Bodymovin, so they can't be exported. An alternative to using masks would be the Track Matte feature (where you animate/use an extra shape layer and track-matte the item you want to mask TO that layer). This feature IS supported by Bodymovin.
Hi, i am new to this. I wanted to json my png segment. Arranged them on after effects, all cool, than followed all instructions from you and other sites, clicked the compress&include rasters option. It rendered...but out came just a blank? Is it non compatible with pngs? Or is there another option to convert these?
It's definitely compatible with PNGs, and my initial reaction to this is making sure the PNG didn't import as a sequence (i.e. where a group of images gets imported as footage rather than individual images). If that isn't the case, then I'd recommend NOT checking "enable compression" and instead checking "copy original assets".
Thank you ! I have a question about exporting JSON in bodymovin. So i was to export my animation to json bodymovin. After exporting, i drag to lottie preview. My animation look cropped like masking (?) but in my After Effect my animation is fine. Do you have any solution? :(
If you're using masks on some of your layers, it could be that you're using an unsupported mask type? Otherwise, check the precomp you have selected when you export through bodymovin
Hey I am having an issue while redering a composition of about 70 layers and has pretty much animation when the redering is finished file didnt saved when i preview current reders I click on recently redered comp and it says couldnot load the file? Any solution to this?
I'm not familiar with this bug... I'd have to take a closer look at the file. So the bodymovin render failed? Are you using masks and/or effects? If you're using text, make sure you're exporting as glyphs as well-I've had renders fail because of this. Using expressions is also tricky with json exports.
Hmm could you say more? Does the export stall, or does it export and the animation turns up blank? What extension file are you referring to? If the animation is blank after export, it could be an effect you're using, or an incompatible layer type with Bodymovin. Usually it's incompatible masks.
@@grantjoseph1576 Geez louise, that's a big file! How many images are you using and what are the sizes of the images? Are you able to combine several of the images into one PNG/JPEG using photoshop? Are there hidden layers of images you aren't using, or old versions of photos in a separate, unlinked precomp?
the black and white effects in AE aren't compatible with JSON, so you'll have to manually switch the colors or if you're using external assets, export them from photoshop with the BW effect
@@halftonedigital9819 am using after effects project which includes, saber effects, normal keyframes, photoshop assets, some glow ,deep glow ,light sweep. Also the quality is lower. Any chance of knowing?
@@juostudios6216 Unfortunately, effects from After Effects aren't supported by bodymovin. Plugins also don't work in jsons and tend to show up as static images, or don't appear at all. So anything featuring a glow would need to be a PNG layer of the glow with regular AE keyframes like opacity, position, masks, scale, etc.
Hi! Great tutorial - big help. Can you/amyone help with a problem? - I'm having a problem when taking my Json file to preview in Lottie. My contents in AE are imported illustrator elements, with no effects etc, just movement and opacity changes. When I bring my Json file into Lottie it shows a 'default' image for the animation. I'm going round in circles! I've clicked 'Allow scripts....' The only time it worked was when I made shapes in AE and then exported these with Bodymovin..... getting very frustrating!
Hi! As far as my experience goes, Bodymovin can't embed illustrator files, only assets made directly in AE or JPGs and PNGs. With illustrator files, you can still "Create Shapes from Layer" i.e. create outlines of shapes, and Bodymovin will recognize them in the export
@@user-mt3je1vt6t Make sure to have "Glyphs" enabled in your Bodymovin settings! This transforms all text to vectors on export (but doesn't affect the actual AE file)
@@localdoodler I would suggest using ImageOptum to compress your PNG sequence files and if there are duplicate frames, remove them from the JSON file and just extend one of the PNGs out (so that it registers as just ONE file vs 15 individual files that all look the same). Hope this helps!
Hm, I might need more details. I've run into render issues by having shapes with extraneous fills and strokes, so I'd recommend deleting all hidden layers and as a last resort, slimming down all keyframe usage to the bare necessities. Also, make sure you aren't using any After Effects effects/presets, since those don't export in JSONs. If you're using gradients, definitely go through the layer Add settings rather than using the Gradient Ramp effect.
@@halftonedigital9819 Okay thanks for your help brother I will tell you I am new to after effect I do not understand much but I learn, and I will comment in more detail the logo has fillings and strokes that I saw in a tutorial I followed the steps of the video and the rest I did not touch anything just do the logo, also another problem is that it does not allow me to export the transparent background either in video I want to export the transparent video but it comes out with the background color that could be brother?
@@kan1358 The only video format for transparent backgrounds (aside from JSON) is MOV. In the export settings for Quicktime/MOV, you'd have to set the video output channel to "RGB + Alpha" (the default is RGB) and then in Format Options, set the Video Codec to "Alpha ProRes 4444". I have a video on transparent MOVs here: ua-cam.com/video/QGnk1nWSD4w/v-deo.html that walks through that process around the 6min mark.
@@halftonedigital9819 Great, thank you very much for your enormous help, even though I tried all that before the alpha + rgb and the mov format but it still appears, do you think it is because the background that I put is together with the logo, that is, I import the logo and now The logo has a background and I try to delete it but even so when processing the background it continues to be seen
@@kan1358 If you're using a JPG for the logo asset, chances are it has a background on it. You might be able to fix that by auto-tracing in After Effects, but the best solution would be to A) use a transparent PNG of the logo or B) import an Illustrator file of the logo into After Effects
As long as you're compressing your assets correctly, the end json can definitely be under 1MB. For the video I used uncompressed files initially just to get the right resolution.
@@fatjay9402 Definitely. It all depends on dimension, duration, and optimization of the files which is why json is best suited for vector animations since they're far crisper in json format rather than MP4/GIF. Complex vector animations can easily wind up under 30KB.
Very nice breakdown. Saved me a lot of time by showing how to include rasterized images in the JSON. You are the hero of my day!
Loved the details you have talked about at the beginning, most of the UA-camrs shares only the steps.
Thank you! We have a lot of-perhaps too many-useful tips on jsons in the future. It's easier to work with bodymovin once all the quirks are understood.
Thanks, super helpful, not sure why, but my animation doesn't move when exported to json 🤷♂
My animations are stripped down after export. Why is this occur?
Obrigado pelo video, não encontrei ninguém falando sobre isso em português, mais mesmo eu não entendendo muito inglês conseguir entender os ensinamentos do video.
Can you, please, share tutorial, how you animated laptop at the beginning of the video 🙏
thank you
Thank you very much for the tutorial, it really helped me too much, it is the only video I found and it worked for me.
By the way, I don't speak English, but I wanted to thank you for your help. Take care, greetings.
Thank you so much, I kept rendering the video but the file wasn't working properly. Your tutorial saved my lifeeee :D, thanks again.
So glad we could help out!! Good luck with your future json adventures :D
gotcha, this is what i was looking for, thanks halftone Digital
Thank you! simple and quick i love this kind of tutorials :)
Extremely helpful video! straight to the point. Thank you so much
How to add clicktag to html exported from Bodymovin'?
Please share if you have any tutorial on that?
Thanks
I've recently worked on a project that involves using click targets in lottie animations, so I'll interrogate the developer about what he did to make it work. On my end, I just made a point to title the layers appropriately and end each later name with ".clickTarget" i.e. "first.clickTarget" and then created timeline tags where the first click's animation sequence is and title that timeline tag "first"
@@halftonedigital9819 Thank you!
Thank you, you freaking lifesaving angel
Hello good evening I wanted to know why it takes so long to export the file with the bodymovin
thank you so much, short helpful and it showed all I needed :)
hello why my ae and this extension can not export as this tutorial? its only stuck keep rotating with no progress for hours. im using ae 2018. and version 5.8.
Thank you, thank you, thank you, I love youuu!
Thnak you so much! love the video, it is very helpful :)
Thanksss
Amazing, you just helped me solve the issue I was facing to weeks now
Can I use this Jason for unity games or only for web?
Thanks gor the information
Awesome! Thank you so much!
You are awesome. Thank you! 🙏
Love you!!
You saved my life :*
Thank you :)
Perfect
Un millón de likes y gracias :)
thank you so much!
Thanks!! Great tip.
it"s take too much time to render ??
Hi! Im trying to export my animation with some masks and effects and they dont work properly in the json file. Any idea? :( Thanks in advantage!
Hi! Super delayed reply--we have a video on masks in json files. Unfortunately, Effects aren't supported by Bodymovin, so they can't be exported. An alternative to using masks would be the Track Matte feature (where you animate/use an extra shape layer and track-matte the item you want to mask TO that layer). This feature IS supported by Bodymovin.
Hi, i am new to this. I wanted to json my png segment. Arranged them on after effects, all cool, than followed all instructions from you and other sites, clicked the compress&include rasters option. It rendered...but out came just a blank?
Is it non compatible with pngs? Or is there another option to convert these?
It's definitely compatible with PNGs, and my initial reaction to this is making sure the PNG didn't import as a sequence (i.e. where a group of images gets imported as footage rather than individual images). If that isn't the case, then I'd recommend NOT checking "enable compression" and instead checking "copy original assets".
Thank you very much. İ'll tr y that
@@halftonedigital9819 it worked🥳 thank you very much
@@propelakarlson7260 AMAZING! Glad we could help! :D
Thank you ! I have a question about exporting JSON in bodymovin. So i was to export my animation to json bodymovin. After exporting, i drag to lottie preview. My animation look cropped like masking (?) but in my After Effect my animation is fine. Do you have any solution? :(
If you're using masks on some of your layers, it could be that you're using an unsupported mask type? Otherwise, check the precomp you have selected when you export through bodymovin
Hey I am having an issue while redering a composition of about 70 layers and has pretty much animation when the redering is finished file didnt saved when i preview current reders I click on recently redered comp and it says couldnot load the file?
Any solution to this?
I'm not familiar with this bug... I'd have to take a closer look at the file. So the bodymovin render failed? Are you using masks and/or effects? If you're using text, make sure you're exporting as glyphs as well-I've had renders fail because of this. Using expressions is also tricky with json exports.
My animation is not working when i need to extension file to Json, how can do it ?
Hmm could you say more? Does the export stall, or does it export and the animation turns up blank? What extension file are you referring to? If the animation is blank after export, it could be an effect you're using, or an incompatible layer type with Bodymovin. Usually it's incompatible masks.
life saver thanks
My 5 second animation is exporting as a 185 mb file.... way to big for the 10 mb limit. What am I doing wrong
185 mb json file*
@@grantjoseph1576 Geez louise, that's a big file! How many images are you using and what are the sizes of the images? Are you able to combine several of the images into one PNG/JPEG using photoshop? Are there hidden layers of images you aren't using, or old versions of photos in a separate, unlinked precomp?
you saved me
Thanks
thank you!!!
hello sir, how to give black and white effect in json file in after effect
the black and white effects in AE aren't compatible with JSON, so you'll have to manually switch the colors or if you're using external assets, export them from photoshop with the BW effect
@@halftonedigital9819 thank you sir
My animation does not export i just a still image? why
What types of animations are you using? Did you import any special file types as assets?
@@halftonedigital9819 am using after effects project which includes, saber effects, normal keyframes, photoshop assets, some glow ,deep glow ,light sweep. Also the quality is lower. Any chance of knowing?
@@juostudios6216 Unfortunately, effects from After Effects aren't supported by bodymovin. Plugins also don't work in jsons and tend to show up as static images, or don't appear at all. So anything featuring a glow would need to be a PNG layer of the glow with regular AE keyframes like opacity, position, masks, scale, etc.
Hi! Great tutorial - big help. Can you/amyone help with a problem? - I'm having a problem when taking my Json file to preview in Lottie. My contents in AE are imported illustrator elements, with no effects etc, just movement and opacity changes. When I bring my Json file into Lottie it shows a 'default' image for the animation. I'm going round in circles! I've clicked 'Allow scripts....'
The only time it worked was when I made shapes in AE and then exported these with Bodymovin..... getting very frustrating!
Hi! As far as my experience goes, Bodymovin can't embed illustrator files, only assets made directly in AE or JPGs and PNGs. With illustrator files, you can still "Create Shapes from Layer" i.e. create outlines of shapes, and Bodymovin will recognize them in the export
@@halftonedigital9819 about type?
@@user-mt3je1vt6t Make sure to have "Glyphs" enabled in your Bodymovin settings! This transforms all text to vectors on export (but doesn't affect the actual AE file)
Hello there! Do you have a way to compress JSON file. (ex. from 50mb to 10mb)
I am sorry this is because im using png sequence (3d renders)
@@localdoodler I would suggest using ImageOptum to compress your PNG sequence files and if there are duplicate frames, remove them from the JSON file and just extend one of the PNGs out (so that it registers as just ONE file vs 15 individual files that all look the same). Hope this helps!
Hello, good day, please help me when I render my animation I get that I fail, that is, it does not allow me to render in order to save the file.
Hm, I might need more details. I've run into render issues by having shapes with extraneous fills and strokes, so I'd recommend deleting all hidden layers and as a last resort, slimming down all keyframe usage to the bare necessities. Also, make sure you aren't using any After Effects effects/presets, since those don't export in JSONs. If you're using gradients, definitely go through the layer Add settings rather than using the Gradient Ramp effect.
@@halftonedigital9819 Okay thanks for your help brother I will tell you I am new to after effect I do not understand much but I learn, and I will comment in more detail the logo has fillings and strokes that I saw in a tutorial I followed the steps of the video and the rest I did not touch anything just do the logo, also another problem is that it does not allow me to export the transparent background either in video I want to export the transparent video but it comes out with the background color that could be brother?
@@kan1358 The only video format for transparent backgrounds (aside from JSON) is MOV. In the export settings for Quicktime/MOV, you'd have to set the video output channel to "RGB + Alpha" (the default is RGB) and then in Format Options, set the Video Codec to "Alpha ProRes 4444". I have a video on transparent MOVs here: ua-cam.com/video/QGnk1nWSD4w/v-deo.html that walks through that process around the 6min mark.
@@halftonedigital9819 Great, thank you very much for your enormous help, even though I tried all that before the alpha + rgb and the mov format but it still appears, do you think it is because the background that I put is together with the logo, that is, I import the logo and now The logo has a background and I try to delete it but even so when processing the background it continues to be seen
@@kan1358 If you're using a JPG for the logo asset, chances are it has a background on it. You might be able to fix that by auto-tracing in After Effects, but the best solution would be to A) use a transparent PNG of the logo or B) import an Illustrator file of the logo into After Effects
thankssss
thank you su mouch
I love you
7mb ? really ?
As long as you're compressing your assets correctly, the end json can definitely be under 1MB. For the video I used uncompressed files initially just to get the right resolution.
@@halftonedigital9819 ok .. because 7mb is like crazy high :)
@@fatjay9402 Definitely. It all depends on dimension, duration, and optimization of the files which is why json is best suited for vector animations since they're far crisper in json format rather than MP4/GIF. Complex vector animations can easily wind up under 30KB.