- 動画数
- 865
- チャンネル登録者
- 433万
- 総再生回数
- 8.1億
- 最新のアップロード
- 2026/11/12
- 独立ページ
- Programming
- コンテンツの言語: 英語
- 地域: アメリカ合衆国
これは Youtop が運営する独立したディレクトリページです。Fireship や YouTube が運営・後援・承認しているものではありません。 修正を提案する. このクリエイター本人ですか？ページを申請する
Loading
これは Youtop が運営する独立したディレクトリページです。Fireship や YouTube が運営・後援・承認しているものではありません。 修正を提案する. このクリエイター本人ですか？ページを申請する
Fireship · 2021年9月14日 公開
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
