We’re launching Lyria 3.5 in Google Flow Music, with advances across musicality, lyrics, vocals, and creative control
deepmind.google·6d ago
AI Engineering
Lobsters·28d ago·5 min read
How I'm using CSS View Transitions on this blog
TL;DR
CSS View Transitions simplify page animations by allowing seamless transitions between documents without JavaScript. By using a single CSS declaration, developers can animate content changes while maintaining real navigation.
✦ Why It Matters
Implement CSS View Transitions today to improve user experience on your static websites without complex JavaScript.
Key Takeaways
- Use @view-transition for seamless page animations.
- Implement prefers-reduced-motion for accessibility.
- Avoid JavaScript routing for static blogs.
- Enhance user experience with minimal performance impact.
Full Summary
Historically, web developers relied on JavaScript libraries like jQuery and pjax to create animated transitions between pages, which often involved complex routing and content fetching. Max Glenister explores CSS View Transitions, which enable smooth animations between different pages using a simple CSS rule, specifically the @view-transition directive.
This method captures the outgoing page and animates it against the incoming one, eliminating the need for JavaScript-based routing. Glenister's implementation is inspired by Jim Nielsen's blog, where a post title morphs into the header on the post page.
The CSS-only approach is wrapped in a prefers-reduced-motion check to accommodate users who prefer less motion. This technique not only streamlines the development process but also enhances the overall user experience without additional runtime costs.