|
5 | 5 | > |
6 | 6 | <channel> |
7 | 7 | <title>@vtbag: The Bag of Tricks for View Transitions</title> |
8 | | - <link>https://vtbag.dev/</link> |
| 8 | + <link>https://vtbag.dev</link> |
9 | 9 | <description>Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!</description> |
10 | 10 | <language>en-us</language> |
11 | | - <lastBuildDate>Tue, 28 Apr 2026 09:42:25 GMT</lastBuildDate> |
| 11 | + <lastBuildDate>Tue, 28 Apr 2026 10:38:33 GMT</lastBuildDate> |
12 | 12 |
|
13 | 13 | <item> |
14 | 14 | <title><![CDATA[The View Transition API]]></title> |
15 | | - <link>https://vtbag.dev//basics/api/</link> |
16 | | - <guid isPermaLink="true">https://vtbag.dev//basics/api/</guid> |
| 15 | + <link>https://vtbag.dev/basics/api/</link> |
| 16 | + <guid isPermaLink="true">https://vtbag.dev/basics/api/</guid> |
17 | 17 |
|
18 | 18 | <pubDate>Sun, 26 Apr 2026 12:40:26 GMT</pubDate> |
19 | 19 | <description><![CDATA[Basics information about the View Transition browser API]]></description> |
|
25 | 25 |
|
26 | 26 | <item> |
27 | 27 | <title><![CDATA[View Transition Names and Generated Pseudo-Elements]]></title> |
28 | | - <link>https://vtbag.dev//basics/pseudos/</link> |
29 | | - <guid isPermaLink="true">https://vtbag.dev//basics/pseudos/</guid> |
| 28 | + <link>https://vtbag.dev/basics/pseudos/</link> |
| 29 | + <guid isPermaLink="true">https://vtbag.dev/basics/pseudos/</guid> |
30 | 30 |
|
31 | 31 | <pubDate>Fri, 24 Apr 2026 19:08:37 GMT</pubDate> |
32 | 32 | <description><![CDATA[What are those pseudo-elements of the View Transition API and how can I style and animate them?]]></description> |
|
38 | 38 |
|
39 | 39 | <item> |
40 | 40 | <title><![CDATA[Where to Place CSS for Cross-Document View Transitions?]]></title> |
41 | | - <link>https://vtbag.dev//tips/css/</link> |
42 | | - <guid isPermaLink="true">https://vtbag.dev//tips/css/</guid> |
| 41 | + <link>https://vtbag.dev/tips/css/</link> |
| 42 | + <guid isPermaLink="true">https://vtbag.dev/tips/css/</guid> |
43 | 43 |
|
44 | 44 | <pubDate>Thu, 23 Apr 2026 11:21:46 GMT</pubDate> |
45 | 45 | <description><![CDATA[Your CSS rules are ignored by the View Transition API? Maybe you put them in the wrong place.]]></description> |
|
51 | 51 |
|
52 | 52 | <item> |
53 | 53 | <title><![CDATA[View Transitions: What Could Possibly Go Wrong?]]></title> |
54 | | - <link>https://vtbag.dev//tips/view-transition-fails-and-fixes/</link> |
55 | | - <guid isPermaLink="true">https://vtbag.dev//tips/view-transition-fails-and-fixes/</guid> |
| 54 | + <link>https://vtbag.dev/tips/view-transition-fails-and-fixes/</link> |
| 55 | + <guid isPermaLink="true">https://vtbag.dev/tips/view-transition-fails-and-fixes/</guid> |
56 | 56 |
|
57 | 57 | <pubDate>Mon, 20 Apr 2026 14:06:28 GMT</pubDate> |
58 | 58 | <description><![CDATA[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.]]></description> |
|
64 | 64 |
|
65 | 65 | <item> |
66 | 66 | <title><![CDATA[API Levels and Implications]]></title> |
67 | | - <link>https://vtbag.dev//basics/levels/</link> |
68 | | - <guid isPermaLink="true">https://vtbag.dev//basics/levels/</guid> |
| 67 | + <link>https://vtbag.dev/basics/levels/</link> |
| 68 | + <guid isPermaLink="true">https://vtbag.dev/basics/levels/</guid> |
69 | 69 |
|
70 | 70 | <pubDate>Fri, 03 Apr 2026 23:34:47 GMT</pubDate> |
71 | 71 | <description><![CDATA[What are those levels of the View Transition API, and what does that mean for me as a dev?]]></description> |
|
77 | 77 |
|
78 | 78 | <item> |
79 | 79 | <title><![CDATA[View Transition JavaScript API]]></title> |
80 | | - <link>https://vtbag.dev//basics/javascript/</link> |
81 | | - <guid isPermaLink="true">https://vtbag.dev//basics/javascript/</guid> |
| 80 | + <link>https://vtbag.dev/basics/javascript/</link> |
| 81 | + <guid isPermaLink="true">https://vtbag.dev/basics/javascript/</guid> |
82 | 82 |
|
83 | 83 | <pubDate>Thu, 12 Mar 2026 15:03:26 GMT</pubDate> |
84 | 84 | <description><![CDATA[How to interact with view transitions using JavaScript]]></description> |
|
90 | 90 |
|
91 | 91 | <item> |
92 | 92 | <title><![CDATA[Automatically Assigned View Transition Names]]></title> |
93 | | - <link>https://vtbag.dev//tips/auto-names/</link> |
94 | | - <guid isPermaLink="true">https://vtbag.dev//tips/auto-names/</guid> |
| 93 | + <link>https://vtbag.dev/tips/auto-names/</link> |
| 94 | + <guid isPermaLink="true">https://vtbag.dev/tips/auto-names/</guid> |
95 | 95 |
|
96 | 96 | <pubDate>Thu, 12 Mar 2026 15:03:26 GMT</pubDate> |
97 | 97 | <description><![CDATA[Explore current methods for automatically generating view transition names.]]></description> |
|
103 | 103 |
|
104 | 104 | <item> |
105 | 105 | <title><![CDATA[Retain Control While Transitioning]]></title> |
106 | | - <link>https://vtbag.dev//tips/interactivity/</link> |
107 | | - <guid isPermaLink="true">https://vtbag.dev//tips/interactivity/</guid> |
| 106 | + <link>https://vtbag.dev/tips/interactivity/</link> |
| 107 | + <guid isPermaLink="true">https://vtbag.dev/tips/interactivity/</guid> |
108 | 108 |
|
109 | 109 | <pubDate>Wed, 04 Mar 2026 14:12:00 GMT</pubDate> |
110 | 110 | <description><![CDATA[Normally, you cannot interact with a page while view transition animations are running. Here is why that happens, and how to fix it.]]></description> |
|
116 | 116 |
|
117 | 117 | <item> |
118 | 118 | <title><![CDATA[Add Native View Transitions to Your Starlight Site]]></title> |
119 | | - <link>https://vtbag.dev//fwvt/twinkling/</link> |
120 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/twinkling/</guid> |
| 119 | + <link>https://vtbag.dev/fwvt/twinkling/</link> |
| 120 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/twinkling/</guid> |
121 | 121 |
|
122 | 122 | <pubDate>Sat, 14 Feb 2026 09:51:09 GMT</pubDate> |
123 | 123 | <description><![CDATA[Let your Starlight site twinkle in a smooth new light. Learn how to sprinkle some view transition magic on your existing setup.]]></description> |
|
129 | 129 |
|
130 | 130 | <item> |
131 | 131 | <title><![CDATA[Playing Hide and Seek]]></title> |
132 | | - <link>https://vtbag.dev//basics/hide-and-seek/</link> |
133 | | - <guid isPermaLink="true">https://vtbag.dev//basics/hide-and-seek/</guid> |
| 132 | + <link>https://vtbag.dev/basics/hide-and-seek/</link> |
| 133 | + <guid isPermaLink="true">https://vtbag.dev/basics/hide-and-seek/</guid> |
134 | 134 |
|
135 | 135 | <pubDate>Thu, 05 Feb 2026 14:23:05 GMT</pubDate> |
136 | 136 | <description><![CDATA[How to control stacking and clipping of view transition images.]]></description> |
|
142 | 142 |
|
143 | 143 | <item> |
144 | 144 | <title><![CDATA[Ladies and Gentlemen, Start Your Engines!]]></title> |
145 | | - <link>https://vtbag.dev//fwvt/enabling/</link> |
146 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/enabling/</guid> |
| 145 | + <link>https://vtbag.dev/fwvt/enabling/</link> |
| 146 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/enabling/</guid> |
147 | 147 |
|
148 | 148 | <pubDate>Mon, 02 Feb 2026 20:23:16 GMT</pubDate> |
149 | 149 | <description><![CDATA[How to enable browser-native cross-document view transitions on your multi-page site.]]></description> |
|
155 | 155 |
|
156 | 156 | <item> |
157 | 157 | <title><![CDATA[The Turn-Signal]]></title> |
158 | | - <link>https://vtbag.dev//tools/turn-signal/</link> |
159 | | - <guid isPermaLink="true">https://vtbag.dev//tools/turn-signal/</guid> |
| 158 | + <link>https://vtbag.dev/tools/turn-signal/</link> |
| 159 | + <guid isPermaLink="true">https://vtbag.dev/tools/turn-signal/</guid> |
160 | 160 |
|
161 | 161 | <pubDate>Mon, 02 Feb 2026 20:23:16 GMT</pubDate> |
162 | 162 | <description><![CDATA[@vtbag/turn-signal simplifies directional view transitions for intuitive history traversal navigation.]]></description> |
|
168 | 168 |
|
169 | 169 | <item> |
170 | 170 | <title><![CDATA[Test Your Browser's View Transition Capabilities]]></title> |
171 | | - <link>https://vtbag.dev//basics/test-page/</link> |
172 | | - <guid isPermaLink="true">https://vtbag.dev//basics/test-page/</guid> |
| 171 | + <link>https://vtbag.dev/basics/test-page/</link> |
| 172 | + <guid isPermaLink="true">https://vtbag.dev/basics/test-page/</guid> |
173 | 173 |
|
174 | 174 | <pubDate>Mon, 02 Feb 2026 10:57:11 GMT</pubDate> |
175 | 175 | <description><![CDATA[Check what part of the View Transition API is supported by your browser]]></description> |
|
181 | 181 |
|
182 | 182 | <item> |
183 | 183 | <title><![CDATA[Styling View Transitions]]></title> |
184 | | - <link>https://vtbag.dev//basics/styling/</link> |
185 | | - <guid isPermaLink="true">https://vtbag.dev//basics/styling/</guid> |
| 184 | + <link>https://vtbag.dev/basics/styling/</link> |
| 185 | + <guid isPermaLink="true">https://vtbag.dev/basics/styling/</guid> |
186 | 186 |
|
187 | 187 | <pubDate>Wed, 21 Jan 2026 14:21:35 GMT</pubDate> |
188 | 188 | <description><![CDATA[Styling view transitions including :active-view-transition-type and view-transition-class]]></description> |
|
194 | 194 |
|
195 | 195 | <item> |
196 | 196 | <title><![CDATA[Flickering during Cross-Fade Animations?]]></title> |
197 | | - <link>https://vtbag.dev//tips/over-exposure/</link> |
198 | | - <guid isPermaLink="true">https://vtbag.dev//tips/over-exposure/</guid> |
| 197 | + <link>https://vtbag.dev/tips/over-exposure/</link> |
| 198 | + <guid isPermaLink="true">https://vtbag.dev/tips/over-exposure/</guid> |
199 | 199 |
|
200 | 200 | <pubDate>Wed, 21 Jan 2026 14:21:35 GMT</pubDate> |
201 | 201 | <description><![CDATA[Why custom fade animations for view transitions might flash.]]></description> |
|
207 | 207 |
|
208 | 208 | <item> |
209 | 209 | <title><![CDATA[The Utensil Drawer]]></title> |
210 | | - <link>https://vtbag.dev//tools/utensil-drawer/</link> |
211 | | - <guid isPermaLink="true">https://vtbag.dev//tools/utensil-drawer/</guid> |
| 210 | + <link>https://vtbag.dev/tools/utensil-drawer/</link> |
| 211 | + <guid isPermaLink="true">https://vtbag.dev/tools/utensil-drawer/</guid> |
212 | 212 |
|
213 | 213 | <pubDate>Tue, 20 Jan 2026 17:59:04 GMT</pubDate> |
214 | 214 | <description><![CDATA[A growing collection of lightweight utilities to help you craft polished view transitions.]]></description> |
|
220 | 220 |
|
221 | 221 | <item> |
222 | 222 | <title><![CDATA[The Cam-Shaft]]></title> |
223 | | - <link>https://vtbag.dev//tools/cam-shaft/</link> |
224 | | - <guid isPermaLink="true">https://vtbag.dev//tools/cam-shaft/</guid> |
| 223 | + <link>https://vtbag.dev/tools/cam-shaft/</link> |
| 224 | + <guid isPermaLink="true">https://vtbag.dev/tools/cam-shaft/</guid> |
225 | 225 |
|
226 | 226 | <pubDate>Tue, 06 Jan 2026 15:32:00 GMT</pubDate> |
227 | 227 | <description><![CDATA[Bump your view transition images into position to avoid that unexpected pseudo-smooth-scrolling.]]></description> |
|
233 | 233 |
|
234 | 234 | <item> |
235 | 235 | <title><![CDATA[The Element Crossing]]></title> |
236 | | - <link>https://vtbag.dev//tools/element-crossing/</link> |
237 | | - <guid isPermaLink="true">https://vtbag.dev//tools/element-crossing/</guid> |
| 236 | + <link>https://vtbag.dev/tools/element-crossing/</link> |
| 237 | + <guid isPermaLink="true">https://vtbag.dev/tools/element-crossing/</guid> |
238 | 238 |
|
239 | 239 | <pubDate>Tue, 06 Jan 2026 15:32:00 GMT</pubDate> |
240 | 240 | <description><![CDATA[@vtbag/element-crossing allows you carry over state to the next page when using cross-document view transitions]]></description> |
|
246 | 246 |
|
247 | 247 | <item> |
248 | 248 | <title><![CDATA[The Inspection Chamber]]></title> |
249 | | - <link>https://vtbag.dev//tools/inspection-chamber/</link> |
250 | | - <guid isPermaLink="true">https://vtbag.dev//tools/inspection-chamber/</guid> |
| 249 | + <link>https://vtbag.dev/tools/inspection-chamber/</link> |
| 250 | + <guid isPermaLink="true">https://vtbag.dev/tools/inspection-chamber/</guid> |
251 | 251 |
|
252 | 252 | <pubDate>Tue, 06 Jan 2026 15:32:00 GMT</pubDate> |
253 | 253 | <description><![CDATA[@vtbag/inspection-chamber allows you to examine, judge & optimize all aspects of your view transitions]]></description> |
|
259 | 259 |
|
260 | 260 | <item> |
261 | 261 | <title><![CDATA[@vtbag: Overview]]></title> |
262 | | - <link>https://vtbag.dev//vtbag/</link> |
263 | | - <guid isPermaLink="true">https://vtbag.dev//vtbag/</guid> |
| 262 | + <link>https://vtbag.dev/vtbag/</link> |
| 263 | + <guid isPermaLink="true">https://vtbag.dev/vtbag/</guid> |
264 | 264 |
|
265 | 265 | <pubDate>Sun, 04 Jan 2026 22:42:00 GMT</pubDate> |
266 | 266 | <description><![CDATA[What are those Bags of Tricks?]]></description> |
|
272 | 272 |
|
273 | 273 | <item> |
274 | 274 | <title><![CDATA[Playing Tower of Hanoi]]></title> |
275 | | - <link>https://vtbag.dev//fwvt/playing/</link> |
276 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/playing/</guid> |
| 275 | + <link>https://vtbag.dev/fwvt/playing/</link> |
| 276 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/playing/</guid> |
277 | 277 |
|
278 | 278 | <pubDate>Sat, 08 Nov 2025 07:35:44 GMT</pubDate> |
279 | 279 | <description><![CDATA[Fun With View Transitions, Episode 7: Tips, tricks, and fresh ideas to spark your own view transition magic!]]></description> |
|
285 | 285 |
|
286 | 286 | <item> |
287 | 287 | <title><![CDATA[Why View Transitions Might Break on Mobile]]></title> |
288 | | - <link>https://vtbag.dev//fwvt/uncovering/</link> |
289 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/uncovering/</guid> |
| 288 | + <link>https://vtbag.dev/fwvt/uncovering/</link> |
| 289 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/uncovering/</guid> |
290 | 290 |
|
291 | 291 | <pubDate>Sat, 08 Nov 2025 07:35:44 GMT</pubDate> |
292 | 292 | <description><![CDATA[Figure out why view transitions might fail on mobile for no clear reason.]]></description> |
|
298 | 298 |
|
299 | 299 | <item> |
300 | 300 | <title><![CDATA[Check and Control the Image Animations!]]></title> |
301 | | - <link>https://vtbag.dev//fwvt/customizing/</link> |
302 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/customizing/</guid> |
| 301 | + <link>https://vtbag.dev/fwvt/customizing/</link> |
| 302 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/customizing/</guid> |
303 | 303 |
|
304 | 304 | <pubDate>Sun, 19 Oct 2025 22:56:45 GMT</pubDate> |
305 | 305 | <description><![CDATA[How to override the defaults animations for the ::view-transition-old and ::view-transition-new pseudo-elements.]]></description> |
|
311 | 311 |
|
312 | 312 | <item> |
313 | 313 | <title><![CDATA[On a Trip to the Text Morphology Clinic]]></title> |
314 | | - <link>https://vtbag.dev//fwvt/healing/</link> |
315 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/healing/</guid> |
| 314 | + <link>https://vtbag.dev/fwvt/healing/</link> |
| 315 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/healing/</guid> |
316 | 316 |
|
317 | 317 | <pubDate>Sun, 19 Oct 2025 22:56:45 GMT</pubDate> |
318 | 318 | <description><![CDATA[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.]]></description> |
|
324 | 324 |
|
325 | 325 | <item> |
326 | 326 | <title><![CDATA[Hello, and welcome to Fun with View Transitions!]]></title> |
327 | | - <link>https://vtbag.dev//fwvt/welcome/</link> |
328 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/welcome/</guid> |
| 327 | + <link>https://vtbag.dev/fwvt/welcome/</link> |
| 328 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/welcome/</guid> |
329 | 329 |
|
330 | 330 | <pubDate>Tue, 14 Oct 2025 21:23:20 GMT</pubDate> |
331 | 331 | <description><![CDATA[Embark on a journey into the marvelous land of the View Transition API.]]></description> |
|
337 | 337 |
|
338 | 338 | <item> |
339 | 339 | <title><![CDATA[Default View Transition Animations]]></title> |
340 | | - <link>https://vtbag.dev//basics/default-animations/</link> |
341 | | - <guid isPermaLink="true">https://vtbag.dev//basics/default-animations/</guid> |
| 340 | + <link>https://vtbag.dev/basics/default-animations/</link> |
| 341 | + <guid isPermaLink="true">https://vtbag.dev/basics/default-animations/</guid> |
342 | 342 |
|
343 | 343 | <pubDate>Sat, 02 Aug 2025 18:42:31 GMT</pubDate> |
344 | 344 | <description><![CDATA[Mastering the fundamentals is key to creating seamless animations with the View Transition API. Here's a quick guide to get you started.]]></description> |
|
350 | 350 |
|
351 | 351 | <item> |
352 | 352 | <title><![CDATA[Make Your Images Glide Across the Screen]]></title> |
353 | | - <link>https://vtbag.dev//fwvt/morphing/</link> |
354 | | - <guid isPermaLink="true">https://vtbag.dev//fwvt/morphing/</guid> |
| 353 | + <link>https://vtbag.dev/fwvt/morphing/</link> |
| 354 | + <guid isPermaLink="true">https://vtbag.dev/fwvt/morphing/</guid> |
355 | 355 |
|
356 | 356 | <pubDate>Wed, 30 Jul 2025 16:49:39 GMT</pubDate> |
357 | 357 | <description><![CDATA[Let's add the morph animations that have made the View Transition API so renowned.]]></description> |
|
363 | 363 |
|
364 | 364 | <item> |
365 | 365 | <title><![CDATA[Support in Web Frameworks]]></title> |
366 | | - <link>https://vtbag.dev//basics/frameworks/</link> |
367 | | - <guid isPermaLink="true">https://vtbag.dev//basics/frameworks/</guid> |
| 366 | + <link>https://vtbag.dev/basics/frameworks/</link> |
| 367 | + <guid isPermaLink="true">https://vtbag.dev/basics/frameworks/</guid> |
368 | 368 |
|
369 | 369 | <pubDate>Thu, 10 Jul 2025 16:23:33 GMT</pubDate> |
370 | 370 | <description><![CDATA[What is special when using React's <ViewTransition />]]></description> |
|
376 | 376 |
|
377 | 377 | <item> |
378 | 378 | <title><![CDATA[Pseudo-Smooth-Scrolling]]></title> |
379 | | - <link>https://vtbag.dev//tips/pseudo-smooth-scrolling/</link> |
380 | | - <guid isPermaLink="true">https://vtbag.dev//tips/pseudo-smooth-scrolling/</guid> |
| 379 | + <link>https://vtbag.dev/tips/pseudo-smooth-scrolling/</link> |
| 380 | + <guid isPermaLink="true">https://vtbag.dev/tips/pseudo-smooth-scrolling/</guid> |
381 | 381 |
|
382 | 382 | <pubDate>Thu, 06 Feb 2025 13:57:11 GMT</pubDate> |
383 | 383 | <description><![CDATA[Instant scrolling on a page with view transition might lead to an unexpected smooth-scrolling effect. ]]></description> |
|
389 | 389 |
|
390 | 390 | <item> |
391 | 391 | <title><![CDATA[View Transition Examples]]></title> |
392 | | - <link>https://vtbag.dev//basics/examples/</link> |
393 | | - <guid isPermaLink="true">https://vtbag.dev//basics/examples/</guid> |
| 392 | + <link>https://vtbag.dev/basics/examples/</link> |
| 393 | + <guid isPermaLink="true">https://vtbag.dev/basics/examples/</guid> |
394 | 394 |
|
395 | 395 | <pubDate>Thu, 05 Dec 2024 16:09:57 GMT</pubDate> |
396 | 396 | <description><![CDATA[Basic examples on how to use the View Transition API for same-document and cross-document view transitions.]]></description> |
|
402 | 402 |
|
403 | 403 | <item> |
404 | 404 | <title><![CDATA[Pointer Flickering]]></title> |
405 | | - <link>https://vtbag.dev//tips/pointer/</link> |
406 | | - <guid isPermaLink="true">https://vtbag.dev//tips/pointer/</guid> |
| 405 | + <link>https://vtbag.dev/tips/pointer/</link> |
| 406 | + <guid isPermaLink="true">https://vtbag.dev/tips/pointer/</guid> |
407 | 407 |
|
408 | 408 | <pubDate>Wed, 20 Nov 2024 16:33:50 GMT</pubDate> |
409 | 409 | <description><![CDATA[Your cursor can be a tricky shape-shifter during view transitions. Here's how to keep it in line.]]></description> |
|
0 commit comments