Skip to content
Chapter 03 of 04 · 4 lessons · ~37 min

Motion, Content and Forms

Add tasteful animations, bring designs in from Figma, manage content with the CMS and collect leads with forms.

YOUR PROGRESS0%
/ Lessons in this chapter
06
Framer Animations and Effects How to add appear, scroll, hover and loop effects that feel smooth and support your content. Coming soon
07
How to Move a Design From Figma to Framer How to prepare a Figma design, bring it into Framer and turn it into a clean, responsive site. Coming soon
08
Framer CMS Tutorial How to manage blog posts, projects or testimonials with the Framer CMS and show them on your site. Coming soon
09
How to Add a Form in Framer How to add a contact form in Framer, style it and make sure every submission reaches you. Coming soon

Chapter practice task

Task: Animate your landing page, add a CMS-powered section and a working form

  1. Add appear effects to section headings and cards, and one scroll effect.
  2. Bring one section in from Figma (or rebuild it from a Figma design).
  3. Create a CMS collection for testimonials or projects and show it on the page.
  4. Add a form and test that submissions reach you.

By the end of this chapter

  • Your site has smooth, purposeful motion that doesn’t hurt usability
  • You can move work from Figma into Framer
  • Content like posts and projects is managed in the CMS
  • Visitors can contact you through a form

Quick answers for this chapter

Do animations slow the site down?

Framer’s built-in effects are efficient, but too many large animated elements can affect performance. Animate with purpose.

Can clients edit CMS content?

Yes. Invite them with an editor role and they can add and edit CMS items without touching the design.

Where do form submissions go?

To your email or a connected tool, depending on how you set up the form.