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.
Apply the effect, pick the unit, then set the trigger and the delay.
Text effects are applied to the text element itself, from the Effects panel.
Character, word, line or the whole element, depending on the feel you want.
Run it when the text scrolls into view, and stagger the units so it reads rather than flickers.
PICK THE RIGHT ANIMATION UNIT
Know when character, word or line suits the content.
ANIMATE A HEADING AS IT APPEARS
Add a reveal that runs when the text comes into view.
KEEP MOTION READABLE
Use delay and easing so the effect enhances the copy instead of fighting it.
Scroll Effects in Framer
Scroll effects animate elements based on how far down the page someone is, from a simple fade to parallax depth and position transforms.
Building Your First Hero Section in Framer
Time to put your skills into action. Build a hero section from scratch and bring together everything you've learned so far in Framer.
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.
Animate a hero heading word by word on scroll, then try it character by character and compare which suits the tone.
02:15
PUBLISH CHECKLIST
Effect applied
Unit chosen
Trigger set
Delay tuned
Readable at speed
Checked on phone
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How do I animate text in Framer?
Select the text layer, open Effects and add a text effect. Choose whether it animates by character, word, line or as one whole element.
Can Framer animate text on scroll?
Yes. Set the effect to run when the text scrolls into view, so the reveal happens as the visitor reaches it.
How do I stop a text animation looking jumpy in Framer?
Increase the delay between units and soften the easing. Character-by-character at high speed is usually what causes the flicker.
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
