- vừa được xem lúc

Springy Animated Modals // Framer Motion & React Tutorial for Beginners

0 0 41

Người đăng: Fireship

Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its spring animations. Full tutorial https://fireship.io/lessons/framer-motion-modal/

#react #animation #learntocode

Try it out https://react-framer-demo.netlify.app/

? Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

? Resources

Framer Motion https://www.framer.com/motion/
Spring Animations https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations/
Advanced Framer Motion https://fireship.io/framer-motion-advanced-notifications/

? Chapters

00:00 Intro
00:45 Modal Demo
01:29 Setup Framer
02:26 Animated Button
03:06 CSS vs Framer Motion
03:28 Backdrop
05:37 Modal
07:05 Animation Settings
07:58 Spring Damping and Stiffness
08:41 Trigger It
09:41 Animate Presence
10:36 Drag It

? My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

? Topics Covered

- Framer Tutorial
- How to build Animated Modals in React
- Spring Animation Physics
- CSS Modal Styling
- Animated Buttons in React
- JavaScript Animation Techniques

? Credits

Producer: Jeff Delaney https://twitter.com/fireship_dev
Engineer: Klutch https://twitter.com/KlutchDev

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 371

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 130

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 127

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 344

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 262