Component
Circular Intro Animation in Framer



About the resource
To create this circular intro animation, I set up four variants: Out, In, Circle, and Loop, and linked them all using an appear interaction.
In the Out
variant, I arranged multiple arms and stacked images on top of each other using z-index. The arms are set to absolute positioning, while the topmost arm is relatively positioned, keeping the images centered within the arms.
In the In
variant, the images move to the top edge of the arms. Then, in the Circle
variant, each arm rotates to form a circle.
On the Loop
variant, a loop effect is added to these arms so they keep rotating around endlessly. To make sure the profile images inside aren't displayed upside down while rotating, I added a counter-rotation loop effect with the same transition properties.
To make sure the animation starts automatically when the page loads, I connected all these variants with interactions set to "appear" triggers. This makes the component automatically animate to the next variant after a small delay until it reaches the Loop
variant.
About the resource
To create this circular intro animation, I set up four variants: Out, In, Circle, and Loop, and linked them all using an appear interaction.
In the Out
variant, I arranged multiple arms and stacked images on top of each other using z-index. The arms are set to absolute positioning, while the topmost arm is relatively positioned, keeping the images centered within the arms.
In the In
variant, the images move to the top edge of the arms. Then, in the Circle
variant, each arm rotates to form a circle.
On the Loop
variant, a loop effect is added to these arms so they keep rotating around endlessly. To make sure the profile images inside aren't displayed upside down while rotating, I added a counter-rotation loop effect with the same transition properties.
To make sure the animation starts automatically when the page loads, I connected all these variants with interactions set to "appear" triggers. This makes the component automatically animate to the next variant after a small delay until it reaches the Loop
variant.
About the resource
To create this circular intro animation, I set up four variants: Out, In, Circle, and Loop, and linked them all using an appear interaction.
In the Out
variant, I arranged multiple arms and stacked images on top of each other using z-index. The arms are set to absolute positioning, while the topmost arm is relatively positioned, keeping the images centered within the arms.
In the In
variant, the images move to the top edge of the arms. Then, in the Circle
variant, each arm rotates to form a circle.
On the Loop
variant, a loop effect is added to these arms so they keep rotating around endlessly. To make sure the profile images inside aren't displayed upside down while rotating, I added a counter-rotation loop effect with the same transition properties.
To make sure the animation starts automatically when the page loads, I connected all these variants with interactions set to "appear" triggers. This makes the component automatically animate to the next variant after a small delay until it reaches the Loop
variant.

The four variants of the intro animation component.

The four variants of the intro animation component.

The four variants of the intro animation component.