🚨 Animation Alert I explain step by step how to make the animation of planets rotating on the space axis on the recently popular @diagram website ✨

I'm sure there are many different ways, but this is the one I prefer. pleasant reviews 🫶

Here's how it looks 👀

Firstly, let's start with simple illustrations. you can either draw it yourself or find an example like I did below.

After creating an ellipse, give it an outer line and remove the inner colour. Add "angular" to the outline you created and make the centre have a smooth transition.

Add the illustrations you have drawn or found to the outline for default visualisation and then put them all in a frame.

This is the most important part. We're going to copy every line and lock the rest behind it. We will turn the copied lines into frames and add the illustrations on the axis into each of them. After doing all the operations, we will reduce the opacity of the in the frame to %0

Create component then, We will create 90° angles for each frame by adding a variant to the component 1. Line 90° Right Line 2 -90° Left We'll do this one by one for all frames. For a stable conversion, the last variant must have the same appearance as the default variant.

Connect them all according to these settings and your animation is ready 🎊

You can examine the file from figma community to examine it in more detail ✨👇

Emir Bekin figma file: https://www.figma.com/community/file/1244398407895064747