How were these animations made if 3D layers aren't supported?

Hi there,

I’m aware 3D layers aren’t supported in Lottie but I wondered if anyone had any idea how the animations on this page have been created to play in Lottie format?

All I want to do is flip a panel over like the images in these animations.

Thank you for your help!

Not sure what they’ve used but Ive seen this plugin on aescript called Extrudalizer, it allows you to extrude any 2D shape layer into virtual 3D space and its Lottie safe!

Hey @Zac,

Check out this tutorial video: How to create and export 3D animations as Lottie with Extrudalizer - Tutorial - LottieFiles

Hope this helps!

Hi, @Zac if you look at the animation specifically at the persons in the image you will realize its not 3D. Let me break the animation you referred here.

1. Image

The image is being scaled in only one axis that is X-axis no rotation effect is given, means its initial X-scale is +100% but at next keyframe it changes to -100% and this happens very quick, and which make illusion of 3D. You can try with any image or shapes or objects. And that’s why the persons in the image are swapping position in the image. Hope you observe this time.

Anchor point: center of the image

2. Cards

This card is pre-composed animation, but its anchor point is set on its left side (your) may be on pre-comp edge or far from edge. Again no ration only scaling effect is given to this pre-comp.

Anchor point: on side of the comp.
image

3. Floating/Levitating cards

Here rest of the animation is position up and down with little horizontal motion to produce levitation effect.

AT THE END ITS JUST ILLUSION

If you look closely it has a 3d effect applied. This can’t be made with just scale, with just scaling we can pull it off to an extent but this is 3d. If you look closely you will see that not only the x axis is moving but also the y axis of the left and right side of the image changes.