Framer Motion Switch

A cool switch component built with Framer Motion and Tailwind CSS. Toggle the switch to see animation in action.

Toggle to see magic ✨

I came across a tweet that had different kinds of switches. It was built with Framer motion and TailwindCSS.

I thought it would be a good idea to build it as a component and share it with the community.

Basic idea is to use the width and height property and animate them as and when the toggle button is clicked. Based on the checked state, we can animate the x property of the toggle button.

Code Snippet



Build amazing websites with Pro ✨

Get access to over 50+ components and make professional looking websites in minutes.

Want a website that converts? Get in touch!

Experience the magic of a stunning website designed and developed just for you! ✨

John Shahawy
Henrik Söderlund
John Ferry
Meru Gokhale
Georg Weingartner
Jonathan Barshop
Ray Thai
Tony Pujals