Let's Make a Rotating Coin! (what am I doing wrong?)

Lottie Animation Design
1

Hello all, been pulling my hair out with this perhaps someone can identify the error, every which way I attempt this the top side of the coin appears on top of the bottom side when rotated.

Here is every step:

  1. Create two sides of coin in Illustrator (draw circle with triangle on it for side 1, draw circle with little circle on it for side 2 - remove all strokes as outlines for each, save as .ai)
  2. Import ai files into After Effects (“footage” with “merged layers”)
  3. Add to timeline and “convert shapes from vector layers”
  4. Open “contents” in each layer to delete “merged paths” which don’t appear to affect the files
  5. Toggle on 3d layers
  6. Parent side 2 layer to side 1
  7. Change position (z) of side 2 layer so that they are not overlapping exactly on the same plane
  8. Add keyframe for Side 1 at Y rotation: 0 for first frame, add keyframe for Side 1 at Y rotation: 1.0 for last frame
  9. Preview in AE (looks correct), export in Lottie plugin

End result doesn’t work, only shows Side A (triangle) rotating around in circle.

Here is the lottie export from the above steps: https://app.lottiefiles.com/animation/dd60abb2-72cf-4328-8c51-5bb205db92bf

2

Unfortunately can’t view the lottie link, you might need to set the sharing permissions to be “viewable by anyone”

Also, the 3D layers are likely the problem since they’re not supported.

1 Like
3

Thank you for responding! For some reason the public to public button is deactivated when I try to do that. I would love to share the AE file but in another post I tried to do that with a google drive link and it was taken down by the spambot.

OK. So you may have solved it for me if Lottie does not support rotation on X and Y axis. May I ask do you know how these lotties were created?

Custom frame by frame?

My solution I guess could be to export a PNG image sequence. That would result in a really large filesize but I could at least have something to work with.

Thanks again!

4

You should be able to rotate on an x and y axis, but the problem is making something 3D with extrusion and things. Now for the top coin it’s likely path movement to create the illusion of 3D. The second one looks like a similar movement or they did a trick to replicate the coin on the Z axis over and over to create a depth to it.

Maybe something similar to this:

5

Thanks for sharing this. When I create my coin I actually use the exact same technique as that last video you shared. You have to turn on 3d layers in order to rotate it so I guess that cannot be exported to lottie? Really puzzling. I can achieve the effect with png sequencing but quality and file size suffer.

6

Aha I was able to make my sample public!

I added the After Effects file as well for further information.

7

I’ll often use a 3D animation as a reference and just animate a mask (shape layer) to match. For short animations, this is pretty easy.

8

Yeah I tend to do what @bart mentioned.

9

Appreciate you all proving this feedback. In my case I ended up going with a png sequence render to get the achieved look and used dotLottie compression to ease the file size hit.

10

Hi man, I have the same issue as yours. Did you manage to fix it?