The new View Transition API and scroll-driven animations are just wonderful. No JavaScript needed.

It's such a shame that Firefox is missing that feature, but anybody using a WebKit-based browser will have the smooth transitions between pages along with images moving into place between pages, and the scrolling animation when scrolling through Upscaler's website.

View Transition API - Web APIs | MDN

The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

MDN Web Docs
@TheEvilSkeleton It's funny when a cool feature like this lands in Epiphany before it lands in Firefox. It would be nice to see it in Firefox eventually.
@leftybournes @TheEvilSkeleton it's not like Epiphany had to do any work to have it though
@TheEvilSkeleton Lovely! But how does it deal with the swipe gesture to navigate between pages? That’s always tricky when dealing with full page transitions. 🤔 Are the page transitions disabled when swiping? Or is the new/old page overlay disabled if view transitions are in place?
@amxmln yeah, they're disabled when swiping

@TheEvilSkeleton Well at least it won’t look too broken that way. 😅

I just wish they’d get rid of those full page swipe gesture transitions. 😅

@TheEvilSkeleton ngl, those transitions look dope af
@TheEvilSkeleton P.S. This is how I feel when trying to use casual English slang
@TheEvilSkeleton As far as I can see the Firefox implementation is being actively worked on, so it should be just a matter of time.
@[email protected] I'd rather those features be implemented well by the browser devs, than badly again and again by frontend devs, with all the blocking on mainthread and terribly congested scroll events that they are so prone to do. But I also can't help but feel that "fat browser eats all features nom nom, moar millions of liiiinesss" is not the world I want to live in either. But I guess that ship has sailed a long time ago.

Also, I like that disabling JS usually stops pages from animating, because all the animations distract me and hurt my eyes. A quick look at the docs for those new browser APIs don't show anything related to accessibility or the ability to disable those features client side. I hope page transitions and scroll-based animations don't become a required thing in my life in the near future.
@rozenglass A few questions I'd like to ask: 1. does my website's implementation distract and/or hurt you? 2. If so, can you use "Remove animation", "Reduced motion", or any equivalent preference?
@[email protected] Sorry I couldn't help. I mainly use Firefox currently, with JS disabled, so no animations there. I visited the site with ungoogled-chromium, but I think I haven't updated it in a while, so it doesn't seem to have those animation APIs either; there was no animations for me. I went around with Firefox a bit, and found it a pretty and comfy website. Things seemed to be working smoothly, even without JavaScript, so thank you for that ^-^

@rozenglass ah right, I forgot that Chromium has it under a flag. Epiphany has it by default. Maybe you could try it there?

Also, I'm not sure if you're aware, but on Firefox, you can go to about:config, create the string ui.prefersReducedMotion, and set it to 1. This will enable reduced motion only Firefox, but do keep in mind that many websites don't respect that preference.

Install Web on Linux | Flathub

Browse the web

Flathub - Apps for Linux