:active-view-transition-type() is a lifesaver when you want to isolate different view transition use cases on the same page.
Here is how: vtbag.dev/tips/css/#sc...
8 hours ago
0
0
0
0
Posts by Bag of Tricks for View Transitions
So, Iβve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll.
I noticed I repeat a lot of code throughout those experiments β¦ so I bundled that all up in a package for you.
π chrome.dev/view-transit...
1 day ago
58
10
2
0
In light of recent empirical evidence:
Place @view-transition { navigation: auto } exclusively within a <style> element in the <head>.
Refrain from embedding it within external stylesheets, particularly not trailing vast expanses of CSS.
Chrome may otherwise disregard it intermittently.
2 days ago
2
1
1
0
@view-transition will hopefully be baseline before long
2 weeks ago
1
0
0
0
Cool view transition demo by @paolo.ricciuti.me !
2 weeks ago
4
1
1
0
yes, that is good news. It is fixed, just not shipped yet. ;-)
2 weeks ago
2
0
0
0
No, it is not down to the view transition names or the API level π
In Firefox Nightly, everything already looks like in the first video above π₯ Just a touch of patience and we are there π
2 weeks ago
1
0
1
0
Advertisement
Astro v6 just landed, and you can view transition of astro-vtbot from Astro v5 to v6 as a smooth move, simply by letting a version update slide into place.
The new astro vtbot v2.1.12 is ready
and works with both Astro v5 and v6. π
www.npmjs.com/package/astr...
3 weeks ago
1
2
0
0
ππππ -ππππππππππ-πππππ: ππππ β πππ
πΊπππ πππππ πππππ, πππ ππππ
vtbag.dev/basics/javas...
3 weeks ago
1
1
0
0
Think same document view transitions are supported everywhere?
Think again.
Some older browser versions only support the Level 1 API, or not even that. Bramus's library lets you code against the Level 2 API regardless of native support,...
...much like the Bag's mayStartViewTransition():
3 weeks ago
2
1
0
0
If you like Adam's article, you might also want to have a look at vtbag.dev/vector-demo/ and fun-with-view-transitions.pages.dev/episode/7/page
4 weeks ago
4
3
0
0
4 weeks ago
3
0
0
0
So cool to see such a detailed behind-the-scenes look from someone whose work I really admire!
Here are two more demos with swooping transitions that use the image-pair pseudo for the composition instead of the approach described in the article above.
4 weeks ago
3
0
1
0
MPA View Transitions FTW!
4 weeks ago
0
0
0
0
Advertisement
Surely thereβs something we can do. π
4 weeks ago
3
0
0
0
1 month ago
6
1
0
1
If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined.
Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.
1 month ago
1
1
1
0
If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined.
Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.
1 month ago
1
1
1
0
What kind of regression did you encounter? Itβs a bit tricky to make out from the video.
1 month ago
0
0
1
0
I am genuinely confident that Firefox will soon support cross document view transitions. That will make an enormous difference to overall compatibility.
Then it will also soon be possible to detect forward and backward directions without the History or Navigation API.
1 month ago
1
2
0
0
I am genuinely confident that Firefox will soon support cross document view transitions. That will make an enormous difference to overall compatibility.
Then it will also soon be possible to detect forward and backward directions without the History or Navigation API.
1 month ago
1
2
0
0
Great article, especially for guiding people through their first steps. It clearly and simply covers everything that really matters.
Quick heads-up: some code blocks look a bit odd because parts of the formatting were rendered as code.
2 months ago
0
0
0
0
Advertisement
If you have written experimental code that uses the provisional `contain: view-transition` syntax, now might be a good time to switch.
2 months ago
0
0
0
0
As always also covered in "test your own browser", which also includes the link to the most current spec draft.
2 months ago
0
0
1
0
View Transition API:
There is a new kid on the block! π
Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions.
It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
2 months ago
4
0
1
2
Looks really good, even includes the theme toggle π
2 months ago
1
0
0
0