Interaction
This is a Framer recreation of the calendar widget interaction, originally crafted by the amazing Mariana Castilho. Feel free to copy the component to your website and explore how something like this is assembled in Framer.
This calendar widget's smooth interaction is crafted using just two simple variants in Framer. I first created the widget's design with all of its elements. Then, I converted it into a component and created "closed" and "open" variants. All I did next was link the two variants using "tap" interactions, and tweaked the "transition" property on the primary variant for this neat, bouncy animation.
Of course, the component is fully customizable via component properties.
This calendar widget's smooth interaction is crafted using just two simple variants in Framer. I first created the widget's design with all of its elements. Then, I converted it into a component and created "closed" and "open" variants. All I did next was link the two variants using "tap" interactions, and tweaked the "transition" property on the primary variant for this neat, bouncy animation.
Of course, the component is fully customizable via component properties.
This calendar widget's smooth interaction is crafted using just two simple variants in Framer. I first created the widget's design with all of its elements. Then, I converted it into a component and created "closed" and "open" variants. All I did next was link the two variants using "tap" interactions, and tweaked the "transition" property on the primary variant for this neat, bouncy animation.
Of course, the component is fully customizable via component properties.
Calendar widget in Framer component properties.
Calendar widget in Framer component properties.
Calendar widget in Framer component properties.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
