New
New
New
Animation
Circular Selection on Scroll in Framer
This is a circular selection on scroll in Framer, recreated from Daniel’s original work. You can explore how it’s built without code or simply drop the component into your project and try it out.
Created by
About the resource
To create the circular selection on scroll animation in Framer, I first built a city component with two variants: selected and not selected. Then I created a circle wrap component by stacking two city components inside an arm, and duplicating that arm 18 times around a circle, rotating each to form the full ring. Next, I set up multiple variants of the circle component where different cities are selected and the circle rotates slightly with each step. Once the variants were ready, I placed the circle inside a sticky frame and used scroll-triggered variant effects to switch between them. By adding multiple scroll section frames, each scroll action changes which city is selected and smoothly rotates the circle, resulting in the circular selection on scroll animation.
About the resource
To create the circular selection on scroll animation in Framer, I first built a city component with two variants: selected and not selected. Then I created a circle wrap component by stacking two city components inside an arm, and duplicating that arm 18 times around a circle, rotating each to form the full ring. Next, I set up multiple variants of the circle component where different cities are selected and the circle rotates slightly with each step. Once the variants were ready, I placed the circle inside a sticky frame and used scroll-triggered variant effects to switch between them. By adding multiple scroll section frames, each scroll action changes which city is selected and smoothly rotates the circle, resulting in the circular selection on scroll animation.
About the resource
To create the circular selection on scroll animation in Framer, I first built a city component with two variants: selected and not selected. Then I created a circle wrap component by stacking two city components inside an arm, and duplicating that arm 18 times around a circle, rotating each to form the full ring. Next, I set up multiple variants of the circle component where different cities are selected and the circle rotates slightly with each step. Once the variants were ready, I placed the circle inside a sticky frame and used scroll-triggered variant effects to switch between them. By adding multiple scroll section frames, each scroll action changes which city is selected and smoothly rotates the circle, resulting in the circular selection on scroll animation.
The circular component variant with multiple arms in Framer.
The circular component variant with multiple arms in Framer.
The circular component variant with multiple arms in Framer.
