0

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

Monstermash
  • 31
  • 1
  • 6

1 Answers1

1

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

Monstermash
  • 31
  • 1
  • 6