🥳 Enjoy 3 months of Framer for free!
What are we building?
#1 - Creating the component
Begin by creating the variants. I have already created my desired look and turned everything into a component (cmd + option + K). Duplicate the first variant, so you end up with two.
#2 - Setting up the variants
Make all changes on the second variant. Otherwise, you'll have to redo everything on the first one. In this example video, I moved the boxes inward and rotated them to achieve a nice effect on the phone.
#3 - Creating the mouse-over effect
Changing an image on hover is a breeze. Simply select the first variant, press "L", and connect it to the second variant by selecting "Mouse Leave." Repeat this process for the second variant but set to "Mouse Enter".
#4 -Let's create some variants
Let's adjust the transition for a smoother effect. Once we've completed this, we'll create six additional variants based on the first. Unfortunately, my phone's image wasn't set up properly, so I had to create an overlay to show the effect.
#5 -Setting up all of the interactions
With all six colored variants now set up, selecting the boxes is a breeze: just press "L" and link each square with the appropriate variant.
👋 I hope you've enjoyed today's drop.