Syntax - Tasty Web Development Treats

854: Animating the Web With Matt Perry: Exploring motion.dev

Nov 29, 2024

Matt Perry, creator of the open-source web animation library Motion, dives into the evolution of web animations, emphasizing the shift toward user-friendly tools. He discusses the transition from Framer Motion to open source and the challenges of the Web Animation API. Performance testing on slower devices and optimizations for animations are explored, along with comparisons between layout animations and the Vue Transition API. Matt also shares insights on graphics programming and his personal passion for Grime music.

50:14

Creator website

Episode guests

Matt Perry

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

Matt Perry's journey in creating Motion reflects a shift towards user-friendly web animation tools that cater to both designers and developers.

The transition of Motion to an open-source model emphasizes community engagement, aiming to enhance features based on user feedback and emerging browser APIs.

Deep dives

Evolution of Framer Motion

Framer Motion originated from Matt Perry's desire to simplify animation libraries for React, leading him to create PopMotion, which aimed to integrate declarative principles into the animation process. Over time, Matt transitioned to Framer, where he developed Framer Motion, making significant strides in creating a user-friendly API for animations that had previously been viewed as complex. The evolution illustrated a significant shift from older, more cumbersome libraries to a streamlined approach that catered to designers and developers alike. This shift not only enhanced usability but also facilitated a smoother integration of animations within web applications.

Intro

4min

Evolution of Web Animation Tools

11min

Navigating Web Animations and Performance Challenges

5min

Optimizing Web Performance with Framer

2min

Testing Web Performance on Slower Devices

4min

Exploring Microsoft Edge DevTools and Animation Performance

10min

Exploring Frame Rates, Web Animation Challenges, and Future Possibilities

6min

Understanding View Transition API vs Layout Animations

3min

Simplifying Complexity: Libraries, Music, and Motion.dev

5min

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.

Show Notes

00:00 Welcome to Syntax!
01:15 The Framer Motion story
- Motion
05:16 What’s the status of Framer Motion today?
09:08 What tech is Motion built on?
13:40 Is Motion entirely WAAPI?
16:06 Why hasn’t the Web Animation API gained more traction?
17:46 Does Matt design his demos?
19:25 Performance and testing
25:34 Brought to you by Sentry.io
28:10 Have other animation libraries influenced Motion?
- Svelte
- GSAP
- Anime.js
31:49 Micro-Optimizations in JS
36:02 How do you test frame rates?
38:03 Graphics programming and shaders
- Maxime Heckel
- Maxime’s blog
39:58 What is the future of Motion?
41:42 What’s the difference between layout animations and the Vue Transition API?
46:35 Sick Picks & Shameless Plugs