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

Key takeaways

Motion has transitioned to an independent open-source library to expand its utility beyond React.
The architectural foundation of Motion leverages the Web Animations API for efficient animations.
Performance monitoring and optimization are crucial for ensuring animations run smoothly across devices.
Community interaction and feedback will play a significant role in shaping the future of Motion.
Matt emphasizes the importance of building intuitive APIs that can be easily used by a wide range of developers.

Summary

The Origin of Motion

Matt Perry shares the backstory of how Motion (formerly Framer Motion) came into being, tracing the journey from his initial animation library, PopMotion, to its acquisition by Framer where he continued to develop Motion. He emphasizes the goal of making animation libraries more intuitive for developers, particularly in the React environment, where he aimed to bridge the gap between simple design and complex execution.

Transitioning to Open Source

In a significant shift, Motion is now an independent open-source library. Matt informs us of how this transition opens up opportunities for other JavaScript frameworks and enhances accessibility. He mentions plans to integrate popular Framer Motion features into Motion, allowing broader use across various JavaScript environments.

Technological Foundations of Motion

Matt discusses the technological underpinnings of Motion, highlighting the use of the Web Animations API (WAAPI) in building seamless animations. He explains the challenges and benefits of working with various animation methods, including CSS animations, transitions, and the importance of performance optimization.

Performance Testing & Optimization

The conversation shifts to the intricacies of performance testing for animations. Matt details how he ensures that Motion operates at optimal frame rates and discusses some of the tools he uses for profiling and performance monitoring. He emphasizes the importance of writing efficient code to maintain smooth animations by minimizing unnecessary calculations.

Future of Motion and Community Engagement

Looking forward, Matt shares his excitement about what lies ahead for Motion, especially in exploring new functionalities and fostering community engagement through sponsorship and collaboration. He elaborates on integrating the new View Timelines API and how it complements existing features.

Sick Picks & Shameless Plugs

As the episode wraps up, Matt shares his sick pick, which is Grime Music, praising artists like P Money and Ghetts for their dedication to the genre. He also plugs Motion.dev, encouraging listeners to explore the platform and support development efforts.

Show notes

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
Sick Picks Matt: Grime music

P Money

Ghetts

Shameless Plugs Matt: Motion.dev

Sponsor Motion

Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads