Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Intermediate certificate.
Pick the element, choose the event, then point it at the variant you want.
Interactions are added to the layer the visitor actually clicks or hovers.
Click, tap, mouse enter, mouse leave or scroll, depending on what should set it off.
Send the component to another variant, then tune the transition so the change feels right.
TRIGGER CHANGES ON CLICK AND HOVER
Use the right event for the job instead of guessing at it.
MOVE BETWEEN COMPONENT VARIANTS
Connect an event to a variant so the component responds in place.
CHAIN EFFECTS WITHOUT THE MESS
Keep timing and easing consistent so interactions feel deliberate.
Component Variants in Framer
Variants let one component hold several versions of itself, like a button with primary, secondary and hover styles, instead of three separate components.
Building a Responsive Navbar Component in Framer
Build a navbar as one component: sketch the bar, fix it to the top of the page, then add a hamburger view that opens a full menu on mobile.
CURRICULUM
WHAT YOU’LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Add a hover interaction to a card so it lifts slightly on mouse enter and settles back on mouse leave.
06:24
PUBLISH CHECKLIST
Element selected
Event chosen
Target variant set
Transition tuned
Reverse state handled
Tested in preview
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
What's the difference between an event and a transition in Framer?
The event is what the visitor does, such as a click or a hover. The transition is how the component animates from one variant to the next.
How do I make something happen on hover in Framer?
Add a mouse enter interaction that sends the component to another variant, then a mouse leave interaction that sends it back.
Do Framer interactions work on the live site?
Yes. Interactions run on the published site, so what you build on the canvas is what visitors actually get.
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
