Lightnews — Scholar-powered news

Martin Trapp @martr.app · 1d

Initially, I was like a kid in a candy store, selecting everything I wanted.
Later, I narrowed the list down to 19.

My guiding questions were:
– Is it an annoying incompatibility?
– Can I work around it?
– Would I be upset if X was left out because the time went into Y instead?

2

Reposted by Martin Trapp

Kevin Powell @kevinpowell.co · 8d

Do you have any smaller/under-the-radar CSS sites/people that you follow?

Looking for blogs, YouTube channels, or anyone who just shares cool CSS stuff.

Reply if you know any, and look at the replies for new people/sites to follow 😊

17 14 55

Martin Trapp @martr.app · 8d

Wow, hard to believe this was made over 2 years ago! Just tweak some CSS properties and let the browser figure out the transition. Why don’t we see animations like this on more websites by now?

Bramus @bram.us · 8d

Have you seen www.bram.us/2023/05/09/r...?

Extend it with a MutationObserver (or StyleObserver) and you can have it auto-transition :)

Rearrange / Animate CSS Grid Layouts with the View Transition API

Animate elements in a grid layout as new items are added, items change size, etc.

www.bram.us

1 2 8

Martin Trapp @martr.app · 17d

I started to add .catch(e => console.log(e)) to the view transition promises, at least for the updateCallbackDone (won't show anything in your case) and ready promises (would have printed "TimeoutError: Transition was aborted because of timeout in DOM update").

vtbag.dev/tips/view-tr...

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 b...

vtbag.dev

2

Reposted by Martin Trapp

Martin Trapp @martr.app · 18d

For everyone who cannot wait until native cross-document view transitions arrive: Your Astrojs sites with <ClientRouter> will already support view transitions for same-origin navigation in Firefox 144!

1 3 7

Martin Trapp @martr.app · 18d

For everyone who cannot wait until native cross-document view transitions arrive: Your Astrojs sites with <ClientRouter> will already support view transitions for same-origin navigation in Firefox 144!

1 3 7

Martin Trapp @martr.app · 22d

My start with view transitions was Astro‘s client router, which adds cross-document view transitions using only the level 1 API.

And as its swap function requires the entire new DOM, pre-rendering is the best approach.

Fun fact: i built that portal because i misunderstood a user‘s requirement 🥳

1

Martin Trapp @martr.app · 22d

Ah, that is interesting! Hadn‘t seen that before!

Martin Trapp @martr.app · 22d

I didn’t really keep up with it that enthusiastically back then. The render blocking might still causes noticeable stuttering.

1 1

Martin Trapp @martr.app · 22d

Haha, that was easy, I read a good explainer ;-)

vtbag.dev/basics/api/#...

Noam Rosenthal @nomster.bsky.social · 22d

Yes, you got it right!

1

Martin Trapp @martr.app · 27d

Congratulations Adam on your new role! Wishing you great success and an exciting journey ahead!

1

Martin Trapp @martr.app · 29d

"...and I'm somewhat involved in the design of this feature..."

That line had me grinning. I love how casually you put it.
Thanks, that really made my day!

1

Martin Trapp @martr.app · 29d

I spend some time wandering the depths of view transitions, but I guess I could find my way back to the surface with patterns that work in real projects. I would be glad to help out, sounds like fun to team up with you on this.

1 1

Martin Trapp @martr.app · 29d

Hi @samwho.dev, thank you very much, I really appreciate you sharing it! I am glad you found it useful, and even more glad if you have stumbling blocks to add ;-)

1

Reposted by Martin Trapp

Web Directions @webdirections.org · Sep 11

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. You might trip over some of these, and it could make you turn away from the API. That would be unfortunate because view transitions can be a lot of fun for developers and a real benefit for website users. My goal is to catch you before frustration sets in or you walk away, and to offer help with the most common problems that might occur. Source: View Transitions: What Could Possibly Go Wrong? |

conffab.com

1 3

Martin Trapp @martr.app · Sep 7

Don’t trink and vibe!

That might turn out to be very useful one day if I ever want to vibe-code half drunk. Please take note: botl.new redirects to bolt.new ;-)

2

Martin Trapp @martr.app · Sep 6

Have fun! You have to dig a bit through the linked posts and the codepen. They also have pointers to vtbag.dev where the approach is covered in more detail.

Martin Trapp @martr.app · Sep 4

Will do!

1

Martin Trapp @martr.app · Sep 4

Thanks for the screenshot, Lou, really appreciate it!

1 1

Martin Trapp @martr.app · Sep 3

Thank you for the confirmation, Nathan.
Lack of hardware on my side ;(

Martin Trapp @martr.app · Sep 3

Hey friends out there with access to Safari's latest Technology Preview: Does vtbag.dev/basics/test-... light up the indicators for the active view transition property and Navigation API in your browser?

IntentToShip @intenttoship.dev · Sep 3

Webkit: Release Notes for Safari Technology Preview 227

webkit.org

2 2

Martin Trapp @martr.app · Sep 3

Interesting question from Kevin Powell: having several view transition actions on the same page, is it possible to run them independently?

Kevin Powell @kevinpowell.co · Sep 3

So I made a quick demo and a video cause I can explain it better there :D

Video is too big for bksy though...

video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...

1 1

Reposted by Martin Trapp

Bag of Tricks for View Transitions @vtbag.dev · Sep 1

We all are craving ;-)

Bag of Tricks for View Transitions @vtbag.dev · Sep 1

Yep, L1 is a good start. There are ways to extend that into cross-document view transitions, e.g. with Astro. Safari quickly followed up with L2. @firefox.com might prioritize other goals like the remaining interop 2025 features.

But they know the whole community is craving MPA view transitions!

1 1 1

Martin Trapp @martr.app · Aug 28

🙌🏻

Martin Trapp @martr.app · Aug 28

Hi Barry, thanks for letting me know!
2025 is of course even better.

I have not heard much about progress, but there are still a few months left for improvement. ;-)

2