Wood Toggle in Framer

This is a wooden toggle interaction built recreated in Framer, inspired by Voicu Apostol’s original work. You can copy the component into your own projects or remix it to explore the setup and understand how the visual styling and click interaction are put together without writing any code.

Created by

Nandi

Prianca

and

Voicu

Privacy settings toggle switch, Private selected

About the resource

To create this, I drew the toggle entirely using frames on the Framer canvas. For the realistic wooden look, I generated the wood material and refined it with gradients, blur, and shadows.

I then turned it into a component with public and private variants and linked them using a click interaction. On click, the knob slides smoothly from left to right.

About the resource

To create this, I drew the toggle entirely using frames on the Framer canvas. For the realistic wooden look, I generated the wood material and refined it with gradients, blur, and shadows.

I then turned it into a component with public and private variants and linked them using a click interaction. On click, the knob slides smoothly from left to right.

About the resource

To create this, I drew the toggle entirely using frames on the Framer canvas. For the realistic wooden look, I generated the wood material and refined it with gradients, blur, and shadows.

I then turned it into a component with public and private variants and linked them using a click interaction. On click, the knob slides smoothly from left to right.

Privacy toggle component showing Public and Private states — The two variants of the wood toggle component in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

Magnetic Hover Tooltips in Framer
Component
Magnetic Hover Tooltips in Framer
Component
Pixel Image Load Effect in Framer
Component
Pixel Image Load Effect in Framer
Component