Page Transitions with 0 Lines of JAVASCRIPT!

[@developedbyed]

Anyone remember how annoying it was to set up Barba.js or get stuff working with React's transition group? Thank god all that is going away soon 😅

[@voldemortvi4264]

Dev you are my favorite teacher on the internet Buddy ! i know u have heard this so many times but i really appreaciate your content brother

[@svr666_]

Can you create a video were u do the same effect with just js?

[@Noritoshi-r8m]

We need a 0 Javascript React type of transitions, browsers need to do more like this, Javascript bloats our websites so much.

[@MostafaFaragOnline]

what are you use to put your image in video in right bottom of the screen . the name of the program you use pleas

[@mathnewph]

Wonder if it's work well with spa ? Beacause when you Switch page, HTML isn't fully loaded

[@natuerliches-lebendgefluegel]

Hi, I am looking for an option to let my landing page fade out and then show the shop site. Could not find anything so far. Hope you can help me here.

[@juliscapucin]

That's so awesome! Thank you!

[@kingsmanSmBanglaGaming]

my brain not working anymore...

[@SandraWantsCoke]

It just does not work :/ maybe they deprecated that meta tag? It works with HTMX though. Also, many examples on the web don't work even though it seems they're linking to working samples. Do you by any chance have a repo that I can quickly check? The sample site you have in description does not have that meta tag either, they probably use javascript, which I don't want to do.

[@Way_Of_The_Light]

So is it like preloading the next page? How is it loading the next page so fast when making a http request?

[@MicahKillian]

Server-side rendering is lightning fast.

[@Way_Of_The_Light]

@@MicahKillian sorry I’m new to web development. Whenever I have to go to another page in a rails app, I have to wait for the http response to finish loading. How will this technology make that process fast?

[@xNaii1]

it's loading other html file on image click and at same time doing transition instead of displaying straight. It works fast because these html files doesn't have anything that would add any loading time

[@MicahKillian]

@@Way_Of_The_Light View Transitions are simply baking a well known UI pattern into the browser (rather than relying on JavaScript libraries). Web servers are designed specifically to take on HTTP requests and return HTML. They have been battle-tested and optimized for that task for several decades. When the webserver is in charge of returning HTML, it's called Server-Side Rendering. You don't need JavaScript to do a majority of web development. People new to web dev are given the impression that modern web development must be done with some JavaScript framework like React. Using such frameworks to produce HTML is called Client-Side Rendering (because the HTML is produced on the client/browser, not the server). Server-Side Rendering is far faster and easier to use than Client-Side Rendering. JS frameworks are actually clumsily returning to SSR because they realized the absolute shit show that CSR is even for simple tasks.

[@xSalamz]

Nice! I am going to try this on my WordPress site.

[@Beskha]

Yeah thats really helpful.

[@alex11CV]

Amazing video!! But for some reason when i code using live server it shows my site and font sizes are nice and adequately big lol , once it’s live all the fonts grow bigger than they were coded :/ any solutions ?

[@pearceodegard582]

your zoom?

[@markfoxlaursen5303]

Can you add the source code, in the description? For simplicity :D

[@filipvabrousek6900]

Thanks so much! It works nicely.

[@jjstantonza]

Lovely ending to the video lol 👏

[@oscar_cornejo]

Can it be used in Next.js?🤔

[@dynamohack]

not working on edge wth

[@AbidAnsari-tl2sx]

How to add in react there is only one html file

[@developedbyed]

Wait for them to come out with a special hook soon 😂 or you can still implement it via JS

[@ban_droid]

you dont need this api, this api is not for SPA, SPA is 1 page and you could easily create transition between components

[@hmenorjr]

GGyyyaaaahhh~ Safari's not yet supported. 🤣🤣🤣

[@Dhsidhsusjs]

Can't think of a scenario where i would be only making sites in HTML & CSS

[@developedbyed]

Astro, you can still add JS

[@PerryCodes]

What if I told YOU, that I'm far from gorgeous?

[@Benbeno77]

what is your vs code theme?

[@alman_harbi]

I have the same theme. It is called "Tokyo Night", very cool one.

[@Terms-and-Conditions]

@@alman_harbi Excuse me sir what exactly do you think you're doing? that is classified information

[@yungxix6343]

Awesome

[@mostafakheder7721]

Amazing 🤩🤩🤩

[@oleksandr.brazhii]

Sadly the transitions are still glitchy and freezing in Chromium browsers. So other browser engines won’t get the feature in nearest future.

[@ShakkeerTheCoder]

please zoom in...

[@zidaneuchiha1554]

Halo bang saya dari indonesia

[@PeterSahanaya]

halo bang

[@josephmanni7491]

#1

[@yangerrai1605]

First 😮