ENROLL IN THIS MASTERCLASS TO VIEW THIS LESSON
The end-to-end ultimate Framer masterclass course.
In this exercise, you’ll start with a fully designed but unanimated landing page. Your goal is to animate each section based on techniques shown in Ryan’s demo, entrance animations, scroll-based effects, and interactive states.
This exercise helps solidify what you’ve learned by applying animation techniques to a real-world design.
Below, you will find a static Framer project with no animations applied.
What You’ll Animate
Your task is to add motion that enhances clarity, hierarchy, and engagement. Try to match Ryan’s demo, or go one step further.
How to Approach It
Open the static Framer file (linked below).
Use auto animations, scroll effects, and interactive states to bring each section to life.
Try to recreate what you saw in the demo, but feel free to push it further.
Preview your result and compare to the original.
Hero Section
Animate the heading and subheading with a fade-in + upward slide on page load
“Get started” button: fade-in with slight delay and scale on hover
Background mailbox: optional parallax or reveal animation
Services Section
Staggered entrance of each card as it scrolls into view
Hover interaction on “See project” buttons (scale or border effect)
Selected Work Grid
Fade-in each image with slight stagger on scroll
Optional: subtle hover scale on each thumbnail
Footer
Social icons fade or slide in on scroll
Hover states on footer links (color shift or scale)
Review Prompts
Take a moment to reflect or discuss + Post in the Discord:
Which part of the animation flow was easiest or most difficult?
How did animations improve the user experience?
What animation style felt the most difficult to you?.
Did you match Ryan’s animations or choose a different animation style, and why?
Submission
Submit: Your remix and live preview link
