3d objects and Lottie

Hey!

We’re producing high-detailed 3d graphics for our web project and looking for way to implement it smoothly, Lottie come at our hand as best solution so far, but questions comes also

Main of them - would Lottie work with 3d graphics well? We made animation in C4D, render it as png sequence and then going to import to AE with Lottie plugin. In documentation found only information about in-AE compatibility, like shapes, masks and stuff.

Hey there,

Maybe you can import the C4D file in after effects and then render that composition in the Lottie plugin. As far as I know, Lottie does not support images or videos.
Hope this helps.!

@ viktorhorou The only way is by using image sequences exported from C4D.

@ jayakumar Images are supported by Lottie but aren’t scalable as a vector and it might look pixelated.

We’ve got png sequence out of C4D, question is how to implement it into Lottie/Bodymovin right way

RN our result Is pretty failed. It’s ~18mb for 1080p 2sec animation without background, downscaled to 640p takes about 3mb, but looks awful. We do something wrong for sure, cause around same level of animation in webflow tutorials with Lottie took way less for loading

Try some compression (60-80%) with bodymovin. If the scale is fixed and the animation isn’t responsive, you could render it with the size used in the webpage. Also, try reducing the frame rate. If this still doesn’t work, I think mp4/webm could be your best solution. There’s no other way to insert a 3D object into a Lottie other than an image sequence.

You could use these settings to implement an image sequence with bodmovin

2021-04-13

With Lottie true 3D isn’t possible. You would have to setup your objects as 2d shapes and keyframe the paths to Mimc 3D movement, it’s not the exact same but it is a possible workaround. Fake 3D stuff is worth the effort of hand animating vertex points if done correctly.

1 Like