BETA
Get notified 🔥
Updates right into your inbox when a new tutorial drops.
Get notified
Interactive component with events
May 7, 2023
Interactive component with events
Functional interactions can create excellent user experiences. They add dynamism to your website, providing users the opportunity to interact with interesting areas.
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.This is the way.
Convert to stack
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.
Create 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."
Setting up the 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.
Finishing 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! :)
Create component
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.
Duplicating 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.
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.
Hover effects
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.🤩
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.
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.
Finishing up
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.
import React, { Component } from "react" import { addPropertyControls, ControlType } from "framer" import { motion } from "framer-motion" class LoadingBar extends Component { render() { const { color } = this.props const loadingBarContainerStyle = { position: "relative", width: "100%", height: "4px", borderRadius: "2px", backgroundColor: "#f0f0f025", } const loadingBarVariants = { hidden: { scaleX: 0 }, visible: { scaleX: 1, transition: { duration: 2, ease: "linear" }, }, } return ( <div className="loading-bar-container"> <div style={loadingBarContainerStyle}> <motion.div style={{ backgroundColor: color, height: "100%", originX: 0, }} initial="hidden" animate="visible" variants={loadingBarVariants} /> </div> </div> ) } } addPropertyControls(LoadingBar, { color: { type: ControlType.Color, title: "Color", defaultValue: "red", }, }) export default LoadingBar