New
New
New
Component
Docking Pricing Plans Interaction in Framer
This is a Docking pricing plan interaction recreated in Framer from Camden’s original work. Feel free to remix the project and explore how the transitions were built in Framer.
Created by
About the resource
To create this dock toggle interaction in Framer, I started by designing the dock itself with both yearly (yellow) and monthly (blue) sliders using gradients and subtle shadows to give it depth. Next, I added chips for the active and inactive states, placing them within frames for both color. All content elements were stacked together.
I then built the toggle component with four variants to handle both monthly and yearly states. For the glowing effect on the button, I created a separate button component with a hover state that lights up from within.
About the resource
To create this dock toggle interaction in Framer, I started by designing the dock itself with both yearly (yellow) and monthly (blue) sliders using gradients and subtle shadows to give it depth. Next, I added chips for the active and inactive states, placing them within frames for both color. All content elements were stacked together.
I then built the toggle component with four variants to handle both monthly and yearly states. For the glowing effect on the button, I created a separate button component with a hover state that lights up from within.
About the resource
To create this dock toggle interaction in Framer, I started by designing the dock itself with both yearly (yellow) and monthly (blue) sliders using gradients and subtle shadows to give it depth. Next, I added chips for the active and inactive states, placing them within frames for both color. All content elements were stacked together.
I then built the toggle component with four variants to handle both monthly and yearly states. For the glowing effect on the button, I created a separate button component with a hover state that lights up from within.
Toggle and button components with four variants each.
Toggle and button components with four variants each.
Toggle and button components with four variants each.
Once the dock and all its parts were ready, I added variants for each step of the animation sequence, allowing smooth transitions between states. Finally, I used the rollover technique to loop the animation seamlessly, adding both click and appear interactions to trigger the interaction.
Once the dock and all its parts were ready, I added variants for each step of the animation sequence, allowing smooth transitions between states. Finally, I used the rollover technique to loop the animation seamlessly, adding both click and appear interactions to trigger the interaction.
Once the dock and all its parts were ready, I added variants for each step of the animation sequence, allowing smooth transitions between states. Finally, I used the rollover technique to loop the animation seamlessly, adding both click and appear interactions to trigger the interaction.
The seven variants of the dock component.
The seven variants of the dock component.
The seven variants of the dock component.
