Default View Transition Animations
Mastering the fundamentals is key to creating seamless animations with the View Transition API. Here's a quick guide to get you started.
@vtbag: The Bag of Tricks for View Transitions
Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!
Latest posts
View Transition JavaScript API
How to interact with view transitions using JavaScript
Styling View Transitions
Styling view transitions including :active-view-transition-type and view-transition-class
Flickering during Cross-Fade Animations?
Why custom fade animations for view transitions might flash.
The View Transition API
Basics information about the View Transition browser API
Automatically Assigned View Transition Names
Explore current methods for automatically generating view transition names.
Where to Place CSS for Cross-Document View Transitions?
Your CSS rules are ignored by the View Transition API? Maybe you put them in the wrong place.
View Transition Names and Generated Pseudo-Elements
What are those pseudo-elements of the View Transition API and how can I style and animate them?
Recent updates
Last update dates of all articles on vtbag.dev
Playing Hide and Seek
How to control stacking and clipping of view transition images.
API Levels and Implications
What are those levels of the View Transition API, and what does that mean for me as a dev?
Playing Tower of Hanoi
Fun With View Transitions, Episode 7: Tips, tricks, and fresh ideas to spark your own view transition magic!
Retain Control While Transitioning
Normally, you cannot interact with a page while view transition animations are running. Here is why that happens, and how to fix it.
The Utensil Drawer
A growing collection of lightweight utilities to help you craft polished view transitions.
@vtbag: Overview
What are those Bags of Tricks?
View Transitions: What Could Possibly Go Wrong?
Most of the time, View Transitions just work. This page is for the exceptions: the quirks, the caveats, the things that quietly cancel your animations. Learn how to detect them and bring transitions back to life.
Check and Control the Image Animations!
How to override the defaults animations for the ::view-transition-old and ::view-transition-new pseudo-elements.
Ladies and Gentlemen, Start Your Engines!
How to enable browser-native cross-document view transitions on your multi-page site.
On a Trip to the Text Morphology Clinic
Join Dr. Bag on patient rounds as we explore text-morph animations crafted with the View Transition API. Discover common issues, explore diagnostic techniques, and apply effective treatments.
Add Native View Transitions to Your Starlight Site
Let your Starlight site twinkle in a smooth new light. Learn how to sprinkle some view transition magic on your existing setup.
Why View Transitions Might Break on Mobile
Figure out why view transitions might fail on mobile for no clear reason.
Hello, and welcome to Fun with View Transitions!
Embark on a journey into the marvellous land of the View Transition API.
Pseudo-Smooth-Scrolling
Instant scrolling on a page with view transition might lead to an unexpected smooth-scrolling effect.
The Element Crossing
@vtbag/element-crossing allows you carry over state to the next page when using cross-document view transitions
The Inspection Chamber
@vtbag/inspection-chamber allows you to examine, judge & optimize all aspects of your view transitions
Test Your Browser's View Transition Capabilities
Check what part of the View Transition API is supported by your browser
View Transition Examples
Basic examples on how to use the View Transition API for same-document and cross-document view transitions.
The Turn-Signal
@vtbag/turn-signal simplifies directional view transitions for intuitive history traversal navigation.
The Bag's Bag-Log
The Bag of Tricks for View Transitions will be continuously extended. This is the pile of things to address when time permits.
The Bag of Tricks for View Transitions
Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!
Make Your Images Glide Across the Screen
Let's add the morph animations that have made the View Transition API so renowned.
AI
How generative AI is used on vtbag.dev
The Cam-Shaft
Bump your view transition images into position to avoid that unexpected pseudo-smooth-scrolling.
Support in Web Frameworks
What is special when using React's
Pointer Flickering
Your cursor can be a tricky shape-shifter during view transitions. Here's how to keep it in line.