illustration for Animate React Apps with Framer Motion
free

Animate React Apps with Framer Motion

Instructor

Will Johnson
33m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
156
people completed
Published 6 months ago
|
Updated 4 months ago

Intro

Animations do more than just look good. They can draw the user's attention to important information or let them know they can interact with certain elements.

You can use them to smooth transitions and bring your applications to life. It makes you stand out from the usual wall of text that you see on most applications.

But here is the issue, animations can get complicated. You have to have a good understanding of how CSS works but it takes hours of studying before you can even start trying to animate.

Framer Motion solves this for you and Will Johnson will show you how.

The Project

homepage gif for showing code

In this course, you’ll iteratively add animation to a fully-styled shopping list app that’s built-in React.

You’ll see how Framer works out of the box, and learn just how customizable it is. Throughout the course, Will demonstrates animation through changing size, direction, and even appearance.

It has smart defaults that handle making the animations smooth and performant. Automatically animating layout changes. It does so much for you it almost feels like you're cheating.

You’ll even see how to animate the path of an SVG making it draw the path for your image.

Gain these Skills

Will gives you the knowledge of how to incorporate Framer Motion into any React application. You will be able to customize your animations to do whatever it is you want/need and show your users what items on your app are interactable. You’ll be able to take your static application and make it interactive.

Prerequisites

There are no prerequisites for this course. The application we are working on is already built for you so you just have to be able to follow along with Will as he integrates Framer Motion into the app.

What’s Next?

If you are further interested in learning about animating your applications, Spring Animation in React with React Spring is a great place to learn! Christian Nwamba will teach you the skills to begin using the react-spring library and add animation to your React components.

If you are interested in more courses by Will Johnson, he has a mini-course on how to Create A Blog With Jekyll. Will shows you how to download, install Jekyll plugins, and create blog posts.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    great real-life examples, great coverage of the props available to motion components, thanks Will!

    Rahul Rangnekar
    2 weeks ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    great examples and to the point

    Thiago Temple
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Really nice bite-sized tutorial.

    Matt O'Toole
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Concise and easy to follow introduction to Framer Motion. Thumbs up for Will Johnson's explanation on WHY each prop is used, what they do, and diving into creating dynamic animation.

    Learner
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    There's no Github code base link to follow on

    Sean
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Absolutely fantastic course! I’m definitely going to use Framer Motion in my next project!

    Mike Short
    4 months ago

Course Content

33m • 12 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.