Component
Fun 3D Loader in Framer
This is a Framer recreation of a fun 3D loader animation inspired by Jhey’s work. Remix the project to explore how this playful effect was built—without writing a single line of code.
Created by
About the resource
To create this fun 3D loader in Framer, I started by setting up a component with two variants—one rotated and one not. Inside the component, I added multiple segmented frames with different widths and stacked them side by side to form the loader. Then I nested a blue loader frame underneath these segments, positioned and pinned it carefully, and applied a loop animation to each one with the same offset value. I made sure to check the Play in Offscreen option so the animation runs smoothly.
About the resource
To create this fun 3D loader in Framer, I started by setting up a component with two variants—one rotated and one not. Inside the component, I added multiple segmented frames with different widths and stacked them side by side to form the loader. Then I nested a blue loader frame underneath these segments, positioned and pinned it carefully, and applied a loop animation to each one with the same offset value. I made sure to check the Play in Offscreen option so the animation runs smoothly.
About the resource
To create this fun 3D loader in Framer, I started by setting up a component with two variants—one rotated and one not. Inside the component, I added multiple segmented frames with different widths and stacked them side by side to form the loader. Then I nested a blue loader frame underneath these segments, positioned and pinned it carefully, and applied a loop animation to each one with the same offset value. I made sure to check the Play in Offscreen option so the animation runs smoothly.
The loop effect applied on the blue loader frame.
The loop effect applied on the blue loader frame.
The loop effect applied on the blue loader frame.
All the segments were wrapped inside a holder frame, where I applied 3D transform and rotation for the animated variant. In the non-rotated variant, I kept everything the same but removed the rotation from the holder frame.
Finally, I added a click interaction to toggle between the two variants. The whole thing was built directly in Framer—no code at all.
All the segments were wrapped inside a holder frame, where I applied 3D transform and rotation for the animated variant. In the non-rotated variant, I kept everything the same but removed the rotation from the holder frame.
Finally, I added a click interaction to toggle between the two variants. The whole thing was built directly in Framer—no code at all.
All the segments were wrapped inside a holder frame, where I applied 3D transform and rotation for the animated variant. In the non-rotated variant, I kept everything the same but removed the rotation from the holder frame.
Finally, I added a click interaction to toggle between the two variants. The whole thing was built directly in Framer—no code at all.
The two variants of the 3D loader component.
The two variants of the 3D loader component.
The two variants of the 3D loader component.
