Hello, and welcome to Fun with View Transitions!
If you are anything like me, you are excited to bring some life and polish to your website. In this little series we are diving into the wonderful world of view transitions, where smooth animations and fluent page updates can turn your site from meh to marvelous.
Whether you’re new to view transitions or looking to level up your skills, this series will guide you step by step. If your browser does not support native view transitions (yes, we are looking at you, Firefox 👀) this may not be for you.
Through quick, fun exercises, we’ll explore how to add some serious visual flair to your web projects. Each episode will break down examples from this site, showing you step-by-step how to recreate them for your own view transition adventures adventures.
So, let’s get started because view transitions are seriously fun!
Episode from January 19, 2025
Ladies and Gentlemen, Start Your Engines!
We enable browser-native cross-document view transitions globally on your multi-page site.
In this first episode of the series, we’ll cover the essentials to get started with view transitions for MPA sites:
- Enabling cross-document view transitions
- Respecting users’ preferences for reduced motion
- Including necessary CSS on all relevant pages
- Waiting for the main content of the page to load
Episode from January 22, 2025
Check and Control the Image Animations!
Let's override the defaults animations for the ::view-transition-old and ::view-transition-new pseudo-elements.
Taking a closer look behind the scenes to explore how the View Transition API’s built-in page transitions work, and how to tweak the default settings:
- Examining the pseudo-elements involved in view transitions
- Breaking down the default cross-fade effect
- Configuring a custom cross-fade
- Crafting animations that go beyond cross-fades
Episode from January 25, 2025
Make Your Images Glide Across the Screen!
Today we add these morphing animations the View Transition API is famous for!
Time to add those iconic morph animations the View Transition API is famous for!
- Add
view-transition-name
properties to create additional animations - Assign individual animation durations
- Morph anything into everything
- Be cautious when morphing small text sections with different content and styling