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

1. Open the static Framer file (linked below).

2. Use auto animations, scroll effects, and interactive states to bring each section to life.

3. Try to recreate what you saw in the demo, but feel free to push it further.

4. 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