Let's Learn Motion DevTools!

Build, inspect, edit, and export animations made with CSS and Motion One using this Chrome extension from the Motion team. Matt Perry will show us how it works. 0:00:00 - Welcome 0:00:33 - Who is Matt Perry? 0:16:29 - Figuring out animation with looping 0:23:10 - Getting started wtih Motion DevTools 0:30:31 - Advantages of unlocking the full version of Motion DevTools 0:35:37 - CSS Animation and CSS transitions 0:42:15 - Creating with Motion DevTools in Vite 0:57:21 - Offset with nth child in CSS 1:09:59 - Scroll animations 1:24:43 - Where to learn more about Motion DevTools Repo: https://github.com/learnwithjason/motion-devtools Demo: https://motion-devtools.netlify.app/ Links https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API https://www.learnwithjason.dev/ https://twitter.com/mattgperry https://motion.dev/ https://motion.dev/tools https://motion.dev/dom/scroll https://www.framer.com/motion/ https://www.learnwithjason.dev/schedule Watch future episodes live at https://twitch.tv/jlengstorf This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Nx (https://lwj.dev/nx) - Backlight (https://lwj.dev/backlight) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) Credits: Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com