SPA view transitions land in Chrome 111

So to slightly clarify, this is transitions between two DOM states. It saves you having to keep something in the DOM during an animation. You make the change and DOM elements from before can still be visible during the animation.<p>They are also working on view transitions between documents, this isn&#x27;t that. So rather than having to build a SPA in order to animate between &quot;pages&quot; it will be possible to animate those tradition on a traditional server rendered MPA. Looking forward to that one!

After years of using transitions I concluded that there is nothing better than a static (non) transition. Heavy usage of apps&#x2F;sites with transitions leads to dizziness

I looked at this and thought &quot;What am I looking at? There&#x27;s some janky animation as things shift around but what&#x27;s the bit I&#x27;m missing??&quot; and then it slowly dawned on me clicking around a bit more that it must be the poxy animation bit itself.<p>I mean I guess web consumers are just SCREAMING OUT for this and I&#x27;ve been living under a rock?<p>Obviously I am old and grumpy but holy crap this is exciting browser development now. Seesh.

Looks great on my Android phone. On my Linux desktop with a 4k screen, it renders at ~2 fps and looks absolutely horrible. Hopefully this will be fixed!

As someone who disabled transitions wherever noticable on all my operating systems and who avoids IE, sorry I mean chrome or any chromium derivatives, this isnt for me.<p>However, for users it will affect, can it be disabled.<p>Does this mean more code must be added to code to cater for browsers that do not implement this API can still the this feature?<p>How many chrome only APIs already exist and how often do they break sites on spending browsers. Genuine question as I use Firefox, but have never noticed a broken site so I wonder if these fail gracefully or maybe chrome only APIs are rarely used it I don&#x27;t visit those types of sites....

There’s something in the video that makes me feel uneasy.<p>Hope that other browsers won’t follow the suit cause I’ll have to get myself comfortable with “use reduced motion” switch.

I would find it more exciting if they started removing stuff from browsers, like legacy APIs and features with a very high attack surface.

Awesome, another Chrome-only API. They sure are embracing and extending the web!

Pure vomit. Only good transition is no transition. Stop this wasteful abomination now.

Transitions and animations on the web are already abused by web developers enough today. The last thing we want is a browser API that automatically applies transitions to <i>the entire DOM</i>.<p>Prepare for endless frustration as designers start implementing artificial 5 second delays while you wait for a pretty transition between two states of a page.

I remember this was built in in some browsers back in the days, as transitions between whole pages. Basically the same transitions as in simple presentations (fade, push in from side, reveal as a circle, etc)<p>&lt;meta http-equiv=&quot;Page-Exit&quot; content=&quot;revealTrans(Duration=1,Transition=3)&quot;&gt;<p>Edit, found a video: <a href="https:&#x2F;&#x2F;vimeo.com&#x2F;111317293" rel="nofollow">https:&#x2F;&#x2F;vimeo.com&#x2F;111317293</a>

I think it&#x27;s a good time to introduce a new button to the browser interface, as the gap between the original &quot;take me back to the previous document&quot; and some new concepts like the one presented here is getting bigger and bigger. But maybe I&#x27;m just old?;)

Looks great but I see it chows CPU. I wonder if it&#x27;s doing software rendering instead of GPU?

The really exciting part is the next step — providing this for regular navigation across pages. This way you can have the fancy look of single-page JS apps without the heft and complexity of actual single-page JS apps.

Is there a video or some animations where I could see this feature in action?<p>(Don&#x27;t have access to Chrome atm)

I just don’t want SPAs anymore.

Very reminiscent of what Ilograph is doing for system diagrams: <a href="https:&#x2F;&#x2F;app.ilograph.com&#x2F;demo.ilograph.Ilograph&#x2F;Request" rel="nofollow">https:&#x2F;&#x2F;app.ilograph.com&#x2F;demo.ilograph.Ilograph&#x2F;Request</a><p>(FD: I am working on this)

I feel that the UI is faster, is it only my impression?

wow it&#x27;s almost like they could add a page-specific url bar and decided that was silly, let&#x27;s have it all point to the same domain

Finally!

I find the transition trend interesting, smooth &#x2F; continuous morphing between complex structures is important IMO. Also trendy in biology.