![[VIP] DesignCode: Build Beautiful Apps with GPT-4 and Midjourney](https://design.rip/uploads/cover/blog/designcode-gpt4.webp)
![[VIP] AppCoda: Mastering SwiftUI - Professional Packet (Updated 04.2023)](https://design.rip/uploads/cover/blog/appcoda-mastering-swiftui-professional-packet-worth.webp)
![[VIP] AppCoda: Beginning iOS Programming with Swift (Updated 04.2023)](https://design.rip/uploads/cover/blog/appcoda-beginning-ios-programming-with-swift.webp)
![[VIP] Whoooa! 156 vector Lottie animations](https://design.rip/uploads/cover/blog/whoooa-156-vector-animations.webp)
![[VIP] Motion Sound Vol. 1](https://design.rip/uploads/cover/blog/designrip-svx.webp)
[VIP] Build UI: Framer Motion Recipes
In this course you'll learn Framer Motion from scratch by building six animated components. You'll start with the fundamentals of state-based animation, learn how to animate an unmounting component, create a reusable hook that can animate style properties on scroll, and use dynamic variants to customize an animation based on component state.
Framer Motion is a popular React animation library. It features both declarative and imperative APIs, so you can add common animations in just a few lines of code, or drop down a level to build truly custom effects. It's maintained by Framer, has an active community, and follows the latest best practices used in the React ecosystem.
In this course you'll learn Framer Motion from scratch by building six animated components. You'll start with the fundamentals of state-based animation, learn how to animate an unmounting component, create a reusable hook that can animate style properties on scroll, and use dynamic variants to customize an animation based on component state.
Lessons
- Multistep wizard
Learn the basics of state-based animation with Framer Motion
- Email client
Add animation to unmounting elements using the versatile AnimatePresence component.
- Fixed header: Part 1
Use scroll-based animation to smoothly grow and shrink a fixed header
- Fixed header: Part 2
Add a fading nav and a blurred background effect by extracting a reusable Ho
- Carousel: Part 1
Learn how to use the `x` shorthand property to smoothly animate an image container.
- Carousel: Part 2
Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.
- Resizable panel
Use measured height to resize a panel with dynamic content.
- Calendar
Animate an infinite monthly calendar using direction-aware dynamic variants.
What's Your Reaction?
![[VIP] Awwwards: Advanced Prototyping - From early ideas to rich interactions](https://design.rip/uploads/cover/blog/60070d9ee36ef021339336.jpg)
![[VIP] iOS 15 & Swift 5: Build a library with Swift Package Manager](https://design.rip/uploads/cover/blog/swift-pack.jpg)