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 Fundamentals certificate.
Set a web cursor, then swap in a component and choose how it behaves.
Apply one to the page, or to a single frame for a different cursor there.
Under cursor, choose custom and pick a component you've built.
Follow keeps the pointer and trails your component. Replace swaps it entirely.
SET A CURSOR PER PAGE OR ELEMENT
Control the pointer everywhere, or just over one frame.
REPLACE THE POINTER WITH A COMPONENT
Anything you can design can become the cursor.
ANIMATE IT
Add interactions between variants so the cursor loops or reacts.
Lottie Animations in Framer
Add animated illustrations from the LottieFiles plugin, recolour them to match your brand, and control how they play.
Animating a Navbar in Framer
Take a navbar component and bring it to life: a mega menu on hover, a start state that animates in on load, and an appear effect that slides it down from the top.
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.
Set a custom cursor for one section using a component, try both follow and replace, then animate it.
04:42
PUBLISH CHECKLIST
Web cursor set on the page
Different cursor on one element
Component built for the cursor
Follow or replace chosen
Animation added
Checked it degrades on touch
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How do I add a custom cursor in Framer?
Under cursor in the properties panel, choose custom and pick a component you've built. You can set it on a whole page or on a single frame.
What's the difference between follow and replace cursors in Framer?
Follow keeps the standard pointer and trails your component behind it. Replace swaps the pointer out entirely for your component.
Can a custom cursor be animated in Framer?
Yes. Because the cursor is a component, you can add interactions between its variants so it loops or reacts as the pointer moves.
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
