🥳 Enjoy 3 months of Framer for free!
What are we building?
#1 - Creating the feature cards
Let's begin by creating the feature cards. I've designed two variants, along with a hover state on the closed variant. For demonstrative purposes, I've given the opened card a slightly darker background color so it can be easily distinguished.
#2 - Create a stack of your cards
After creating your variants, head over to your page and duplicate it for each feature you'd like to display. For example, I created three features and grouped them together using a stack.
#3 - Creating the two areas
To get started, set your stack's height to 100% and give it a width of 460px. Next, add a new frame with a height of 800px and a width of 40% (i made a mistake in video). Then, set your page layout to "Align end."
#4 -Setting up your screen
Let's get the page rolling! Fix the styling and layout so that you have two horizontal stacks positioned next to each other. I've added some text, fixed the layout settings, and adjusted some width/height ratios.
#5 -Finishing the design
I added text to the feature cards and mocked up an iPhone simply by drawing a rectangle with a black border and fill.
It really can be that simple! :)
#6 -Make a component out of everything
Select all your layers and wrap them in a stack. You may need to adjust some values, but that's not the main concern. Once everything looks good, press CMD+Option+K to create a component.
#7 -Duplicating the variants
Duplicate your variant twice so that you have three variants in total. Fix the opened/closed states of your feature cards for visual purposes, and change the background color of the iPhone fill.
#8 -Setting up the loop
Create the loop by selecting the first variant, pressing L, and attaching it to the second variant. Be sure to use the Appear effect and set a suitable timing. I recommend 2 seconds. Repeat this process for variants 2–3 and from 3 back to 1 for an infinite loop.
#9 -I was promised a hover effect
It's starting to look nice, but we can add the hover effect to give your visitors more control over the visuals and really spice things up.🤩
#10 -Setting up the events
To achieve the hover effect, let's head back to the feature card. Select the "opened" option and create two new events: a hover effect (mouse enter) and a mouse leave event. If you're not sure how to do this, please refer to the video for guidance.
#11 -Interactions for the hover effect
Duplicate every variant once in your main component.
Select all feature cards in the primary variant, hook hover events to the right variant, and fix mouse leave on all duplicated variants.
Remove the main appear effect on the duplicated variants.
#12 -Adding a little sumpin sumpin
Crafting a pleasant interface for visitors goes along way. I added a custom loading bar component to indicate activity on the website. Its color and visibility state are variable, which enables me to configure it properly so that it does not appear during hover state.
👋 I hope you've enjoyed today's drop.