If You Want To Support My Work 👇
https://www.youtube.com/channel/UCbBt6Ks7M5BZx_GHgGO_UNQ/join

Follow Me On 👇
Any Questions?: https://www.instagram.com/huxnshorts/
Shorts Channel: https://www.youtube.com/@Huxn2.0
Twitter ( X ): https://twitter.com/huxnwebdev
GitHub: https://github.com/huxn-webdev

00:00 - Intro
1:09 - Course Setup
1:32 - Importing Motion
2:12 - Motion Object
2:50 - Basic Props
3:53 - Installations
6:20 - Styling
7:48 - Motion
12:14 - Transformations Animations
22:35 - Transitions Animations
29:48 - Keyframes Animations
41:29 - Variants Animations
56:16 - Gestures Animations
1:13:48 - Stagger Animations
1:27:04 - useMotionValue Hook
1:40:33 - useSpring Hook
1:41:30 - useTransform Hook
1:48:34 - Scroll Trigger vs Scroll Driven Animations
1:50:26 - whileInView Animations
1:58:37 - useScroll Animations
2:11:04 - Practice Setup
2:12:10 - Transformations Mini-Projects
2:24:05 - Transitions Mini-Projects
2:44:08 - Keyframes Mini-Projects
2:59:56 - Variants Mini-Projects
3:19:59 - Gestures Mini-Projects
3:41:30 - Staggers Mini-Projects
3:57:30 - useMotionValue Mini-Projects
4:07:20 - useSpring Mini-Projects
4:09:25 - whileInView Mini-Projects
4:25:10 - Projects Setup
4:26:33 - Scroll Indicator Project
4:32:47 - Loader Project
4:37:01 - Carousel Project
4:49:23 - Draggable Cards
4:55:12 - Complex Sidebar Project
5:09:59 - Scroll Animations Project
5:20:06 - Horizontal Scroll Project
5:26:52 - Sticky Navbar Project
5:36:50 - Progress Steps Project
5:45:59 - Outro

HuXn WebDev

Motion.dev is an advanced animation library for modern web projects using JavaScript, React, or Vue. It simplifies the creation of complex animations, providing extensive control over transformations and transitions. Installation is easy through npm, and it integrates seamlessly with frameworks like React and Next.js. Key components include the motion object, which leverages initial, animate, and exit props to manage animations effectively.

Next.js 15 Animations Masterclass: The Real Power Of Motion.dev

<p>I spent way to long looking at those on the site lol</p>
