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.
