Web Animations: Tools and Techniques | Rachel Nabors

Описание: Did you know web animations have their own dedicated browser dev tools? Come learn how to debug timeline based animations in the browser and share animation specs across teams!

Often design happens in Figma and development happens in components. During that hand-off, motion and interaction design can fall through the cracks. But there are great tools and techniques that marry development and design, bringing life and personality to your UI.

We’ll start with the basics needed to add some visual interest to any project and escalate all the way to integrating complex, orchestrated animations from a motion design team into your workflow. We’ll also cover CSS animation utility libraries, easing tools for creating custom eases and springs, using the Web Animations API to react to and chain animation events.

00:00 in this talk…
00:24 hello hello
01:10 Alice v1: from Flash to Alice in Videoland
02:58 Alice v2: modern web animations
04:19 debugging animation timelines in Firefox
05:36 spring easings
06:25 scroll-driven animations
07:40 debugging CSS scroll timelines
08:03 view-driven animations and view timelines
09:30 moving towards Flash’s animation tools
10:45 audience questions and answers

Rachel Lee Nabors has led developer education at FAANG companies and startups. They've participated in browser development, web animation standards and open source with Mozilla, W3C, and Microsoft and wrote “Animation at Work.” Most recently, they built award-winning React and React Native dev portals at Meta. Currently, they live in London, writing a book on how to survive your tech career.

---

SquiggleConf 2024 was the first edition of SquiggleConf, a yearly conference in Boston for excellent web dev tooling. See https://squiggleconf.com/ to learn more about SquiggleConf 2025: the second edition coming in September 18th-19th 2025 at the New England Aquarium Simons Theater.

SquiggleConf is a production of Squiggle.Tools, a nonprofit organization offering ongoing learning opportunities that enable participants to engage, learn, and advance their careers—regardless of their background or resources. If you want to support us, follow us on social media, and subscribe on YouTube.

BlueSky: https://bsky.app/profile/squiggleconf...
Discord: https://discord.squiggleconf.com
Mastodon: https://fosstodon.org/@SquiggleConf
LinkedIn:   / squiggleconf  
Shop: https://shop.squiggle.tools
X: https://x.com/SquiggleConf