🥳 Enjoy 3 months of Framer for free!
What are we building?
Mixing and matching components to create cohesive interactions can be quite satisfying. Let's explore how we can combine a few different interactions to craft a stunning hero section.
#1 - Setting up the clicker
Let's begin by creating the click area in the bottom right corner. Start by creating a component and adding an image to it. As you can see, I've included a hover state and an additional variant that shows an "X" icon to indicate the close action.
#2 - Creating the overlay
Start by creating a new component and add a frame that spans the entire height and width. Duplicate this frame three times to create four images, and position them outside of the frame. Finally, add another frame that is 700px wide to serve as the left side of the overlay.
Create a new variant with a width of 1400px. Fix the image frame at 0px right and set it to 50% width. Also, anchor the white area at 0px left and set it to 50% width. To set up all your other images, create duplicates of these two variants.
#3 - Brining the components together
Create a second component with 1400px width and 1000px height. Add both components to this new one, and duplicate the first component three more times. This will give you four small icons, each displaying a different small image. Position the large image -450px to the left.
#4 -Let's create some variants
Create new variants for your images. Set one variant with the image aligned to the left at 0px, and create a separate variant for a full-screen overlay image. Repeat this process for all images so that you have 1 closed variant, 4 open variants, and 4 full-screen variants.
#5 -Setting up the interactions
Setting up interactions is easy. Simply select the small image previews in the main component and create a new interaction on tap that will open the corresponding variant.
#6 -Create events to open and close full-screen mode
To enable the full-screen mode, you need to create an event that allows you to click the button on the open variant. Navigate to your overlay component, select the button to open, and create a new event. Do the same for your close button.
You can now return to the main component and add a new tap interaction. This will enable users to transition between the open and full-screen variants by simply tapping on the screen, and vice versa.
#6 -Create events to open and close full-screen mode
To add a nice visual effect on the "open" variant, I duplicated the image layer and set the blur to 100 for the color effect in the background. It's important to note that each variant has its own image, to match the open variant.
👋 I hope you've enjoyed today's drop.