why bodymovin result animation looks more stretched than the source frames

340 Views Asked by At

im making an animation of some product that listens to you and reacts accordingly, however, i want to upload my animation to my webflow project

my animation resolution is 1080x720, however i export the keyframes as PNG images (like webflow tutorial recomends) and then i import those images inside a new After Effects project and then i export the animation (I would like to say that I follow each step of the tutorial exactly as it is) but the problem comes when i test my result json inside LottieFiles previewer, the animation looks stretched (i cant explain it so ill upload 2 images to show the problem)

the original frame is a png image used in the bodymovin sequence

the json output frame is a base64 image (the first frame of animation) stored in the bodymovin animation result data.json

the two images above are the same resolution but looks diferents, i want to know why and how to fix it

thanks in advance

link to the original webflow tutorial that i follow

1

There are 1 best solutions below

0
On BEST ANSWER

sorry this was just a problem of configuration, i figured out how to fix this, i just have to set bodymovin settings > assets > "Copy original a Assets" turn on, in fact, bodymovin use a low-level AI that remove the white / transparent padding and expand the content, enabling original Copy forces bodymovin to avoid using that AI