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.
Review Prompts
Take a moment to reflect or discuss + post in the Slack:
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
