Animation
3D Ring Text Animation in Framer
This is a 3D ring text animation recreated in Framer from Fred Moon’s work. Built with layered frames, 3D transforms, and looping rotation—no code needed. Remix it, explore the setup, or drop it into your next project.
Created by
About the resource
To create this 3D ring text in Framer, I started by wrapping each text inside a 1px wide frame and rotated it 90° on the Y axis. Then I placed each one into a second wrapper—called an Arm—and rotated the Arms along the Y axis to space out the texts in a ring.
All the Arms were stacked inside another frame. On this layer, I applied a loop animation on the Y axis for that continuous spinning motion.
Then I nested this spinning ring into another outer frame, added 3D transform, and rotated it slightly on the X, Y, and Z axis to get the right viewing angle. To bring some of the texts over the globe element, I increased the z-index on front-facing lines.
Finally, I wrapped everything again in another frame and applied 3D transform—this brought the texts and the globe into the same 3D space.
About the resource
To create this 3D ring text in Framer, I started by wrapping each text inside a 1px wide frame and rotated it 90° on the Y axis. Then I placed each one into a second wrapper—called an Arm—and rotated the Arms along the Y axis to space out the texts in a ring.
All the Arms were stacked inside another frame. On this layer, I applied a loop animation on the Y axis for that continuous spinning motion.
Then I nested this spinning ring into another outer frame, added 3D transform, and rotated it slightly on the X, Y, and Z axis to get the right viewing angle. To bring some of the texts over the globe element, I increased the z-index on front-facing lines.
Finally, I wrapped everything again in another frame and applied 3D transform—this brought the texts and the globe into the same 3D space.
About the resource
To create this 3D ring text in Framer, I started by wrapping each text inside a 1px wide frame and rotated it 90° on the Y axis. Then I placed each one into a second wrapper—called an Arm—and rotated the Arms along the Y axis to space out the texts in a ring.
All the Arms were stacked inside another frame. On this layer, I applied a loop animation on the Y axis for that continuous spinning motion.
Then I nested this spinning ring into another outer frame, added 3D transform, and rotated it slightly on the X, Y, and Z axis to get the right viewing angle. To bring some of the texts over the globe element, I increased the z-index on front-facing lines.
Finally, I wrapped everything again in another frame and applied 3D transform—this brought the texts and the globe into the same 3D space.
The 3D ring text animation setup using 3D transforms in Framer.
The 3D ring text animation setup using 3D transforms in Framer.
The 3D ring text animation setup using 3D transforms in Framer.
