We were lucky to have Rachel Lee Nabors talk to the Codingscape frontend practice about the web animations API and creative coding. Rachel has worked for startups as well as Microsoft, Meta, and AWS.
They have collaborated with non-profits like Mozilla and the W3C on web standards, written a book about UI animation, and have been part of Google’s GDE program. Rachel’s favorite projects include the React and React Native developer portals and Firefox’s Devtools Challenger. Before tech, Rachel Lee was an award-winning cartoonist with a serialized webcomic read by 400,000 teenage girls weekly around the world!
Rachel’s background as a cartoonist informs their approach to web animations – bridging the gap between art and code.
Here's their talk the Codingscape frontend practice.
Web Animations API w/Rachel Lee Nabors
What’s the talk about?
If you don't want to watch the video yet, here's a quick overview.
Rachel shared how their work with React documentation, collaborations with Mozilla on Firefox Developer Tools, and their passion for web animations have helped shape the user experience for millions of engineers and web users worldwide.
Web animations API
Rachel brought insights on how the Web Animations API (WAAPI) provides greater control over CSS animations using JavaScript. This API allows developers to create smoother, more performance-efficient animations, which are also more maintainable.
- Web Animations API enhances CSS animations with JavaScript
- Offers better performance and cross-platform compatibility
- Nabors’ work with Mozilla and React involved integrating animations for better user experiences
- Emphasized documenting the Web Animations API for MDN
Technical deep dive
Rachel explored essential technical tools and methods that make modern animations possible. They emphasized accessibility by integrating media queries like prefers-reduced-motion (CSS media feature) to ensure animations are user-friendly and inclusive.
- Used Intersection Observer for monitoring when elements enter the viewport
- Employed Keyframes for defining complex animations
- Stressed the importance of accessible design with prefers-reduced-motion
- Demonstrated the use of animations in a way that adapts to different user needs
New animation features
Rachel highlighted several exciting features in animation – like CSS5 animations and Spring easings – which offer more natural transitions and interactions. They also focused on using the Web Animations API to create dynamic, interactive content.
- CSS5 animations enable more advanced animation capabilities
- Spring easings provide natural motion effects
- View Transitions and Scroll Timelines improve page transitions and scrolling behavior
- Web Animations API allows for chaining animations to create seamless interactive experiences
Web animation best practices and recommendations
Rachel gave practical advice for developers to avoid unnecessary animations and focus on those that improve usability. Their main message was to ensure that animations serve a purpose and don't detract from the user experience.
- Avoid animating “the obvious,” like basic text fade-ins
- Focus on animations that enhance user experience, such as navigational aids
- Ensure animations respect user preferences and accessibility standards
- Thoughtful animations reduce cognitive load for users and improve interface usability
The future of web animations looks hopeful
Rachel concluded with a hopeful outlook on the future of web animations, emphasizing the potential for creativity using tools like Figma. They encouraged developers to push boundaries and avoid settling for generic designs, using animation as a tool for more meaningful interaction.
- Figma’s plugins make animations more accessible to non-coders
- Rachel hopes these tools unlock creativity and unique design possibilities
- Encouraged using web animations to create engaging and user-friendly experiences
Want to hire senior frontend software engineers?
You could spend the next 6-18 months planning to recruit and build a senior software team but in that time, you won’t be building new frontend experiences. That’s why Codingscape exists.
We can assemble a senior frontend development team for you in 4-6 weeks. It’ll be faster to get started, more cost-efficient than internal hiring, and we’ll deliver high-quality results quickly.
Zappos, Twilio, and Veho are just a few companies that trust us to build software with a remote-first approach.
You can schedule a time to talk with us here. No hassle, no expectations, just answers.
