Courses To Frontend.fyi

Crafting beautiful experiences with Motion for React

1. Introduction

0. Framer Motion is now Motion for React free
1. Introduction to the course free
2. About the platform free
3. Comparing Motion for React With CSS Animations free

2. First steps

1. Motion's core principles free
2. Installing Motion for React
3. The Motion Component
4. Creating your first animation
5. Adding a from state to the animation
6. Changing the default transition
7. Make the animation loop with keyframes free
8. Adding interactivity: Hover, focus and tap
9. Build a multi-step animation

3. Motion values

1. Motion values, the core of Motion
2. Make it bounce: useSpring
3. Transforming motion values with useTransform
4. Making elements draggable & practice with useTransform
5. Animating CSS variables (custom properties)

4. Stepping up our game

1. Stepping up our game free
2. Animating elements removed from the DOM
3. Animation variants
4. Let's do a small refactor
5. Animating child components

5. How to make your animations responsive?

1. Making your animations responsive free
2. Responsiveness without media queries free
3. Different behavior per breakpoint
4. Two other solutions to make responsive animations
5. Put our new skills to the test

6. Scroll animations

1. Trigger animations on scroll free
2. whileInView: Animate an element entering the viewport
3. The useInView hook
4. Scroll-driven animations
5. useScroll: Making scroll-driven animations
6. Tracking an element's position on screen
7. Practicing the differences between scroll-driven and scroll-triggered animations
8. Scroll animations with position sticky

7. Layout animations

1. The most powerful feature of Motion for React free
2. Making your first layout animation
3. Animating the impossible
4. Challenges in layout animations
5. Showing new elements
6. Shared layout animations
7. Even more advanced shared layout animations
8. Bonus: The alternative to position absolute

8. Complex animations

Creating more complex animations using the animate() function free
Understanding the useAnimate hook
Animating elements with the animate function
Defining the animation starting point
Making animations loop
Controlling the animation
Multiple animations in sequence
Combining with inView
Combining with exit animations

Please use the lessons of future modules as a guideline of what to expect. The lessons are likely to change and expand in number of lessons.

9. Considerations and Gotchas

Accessibility
Bundle size
SEO impact
Next.js App Directory
Tailwind CSS

Please use the lessons of future modules as a guideline of what to expect. The lessons are likely to change and expand in number of lessons.

10. Motion's APIs

Drag API

Please use the lessons of future modules as a guideline of what to expect. The lessons are likely to change and expand in number of lessons.

Free
lesson

Frontend.FYI PRO gives you instant access to all lessons of this and future courses! €249 one time, no subscription.

Learn about PRO

About the platform

Internal server error