Page Transitions with 0 Lines of JAVASCRIPT!

Рет қаралды 42,401

10 ай бұрын

Check out my courses to become a PRO 🔥
developedbyed.com
Docs
developer.chrome.com/docs/web...
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#react #webdevelopment

Пікірлер: 40

@voldemortvi4264 10 ай бұрын

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

@developedbyed 10 ай бұрын

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 😅

@juliscapucin 10 ай бұрын

That's so awesome! Thank you!

@filipvabrousek6900 9 ай бұрын

Thanks so much! It works nicely.

@svr666_ 10 ай бұрын

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

@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

@xSalamz 10 ай бұрын

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

@Beskha 10 ай бұрын

Yeah thats really helpful.

@mathnewph 10 ай бұрын

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

@joshuastanton2572 10 ай бұрын

Lovely ending to the video lol 👏

@natuerliches-lebendgefluegel 9 ай бұрын

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.

@kingsmanSmBanglaGaming 10 ай бұрын

my brain not working anymore...

@yungxix6343 10 ай бұрын

Awesome

@hmenorjr 10 ай бұрын

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

@alex11CV 10 ай бұрын

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 8 ай бұрын

your zoom?

@Woeden 10 ай бұрын

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

@mostafakheder7721 10 ай бұрын

Amazing 🤩🤩🤩

@Way_Of_The_Light 10 ай бұрын

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

@MicahKillian 10 ай бұрын

Server-side rendering is lightning fast.

@Way_Of_The_Light 10 ай бұрын

@@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?

@davincis1 10 ай бұрын

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 10 ай бұрын

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

@SandraWantsCoke 2 ай бұрын

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.

@oscar_cornejo Ай бұрын

Can it be used in Next.js?🤔

@oleksandr.brazhii 3 ай бұрын

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

@dynamohack 10 ай бұрын

not working on edge wth

@AbidAnsari-tl2sx 10 ай бұрын

How to add in react there is only one html file

@developedbyed 10 ай бұрын

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

@ban-prem-001 10 ай бұрын

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

@Dhsidhsusjs 10 ай бұрын

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

@developedbyed 10 ай бұрын

Astro, you can still add JS

@cyubahirobenjamin7804 10 ай бұрын

what is your vs code theme?

@almannazyrov394 10 ай бұрын

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

@Terms-and-Conditions 10 ай бұрын

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

@ShakkeerTheCoder 10 ай бұрын

please zoom in...

@josephmanni7491 10 ай бұрын

@yangerrai1605 10 ай бұрын

First 😮

@zidaneuchiha1554 10 ай бұрын

Halo bang saya dari indonesia

@PeterSahanaya 8 ай бұрын

halo bang