JavaScript Page Transition ENDGAME (View Transition API Just Made It Stupidly Easy)

[@nicolasveiga8532]

Please make video like this for nextjs

[@codegrid]

👍🏼

[@danielpacheco2520]

I was dealing with this and thought it wasn't possible in vanilla js, great content as always.

[@codegrid]

Thanks!

[@Mmmm-ud6io]

Definitely this was one your best website animation 😍 can't wait for more upcomming videos like this ❤

[@codegrid]

Thanks!

[@xcrap]

Great video and great barebones for websites transitions.

[@agusmacrae2193]

Yes please, a next js version would be great!

[@codegrid]

👍🏼

[@satyambarnwal8401]

awesome video man! just when i needed a transition video😍

[@codegrid]

🙌🏼

[@jolstyn]

Awesome work as always! Easy to understand and very informative, keep it up!

[@codegrid]

Thanks!

[@dominotrix]

View Transition API works only on Chrome for now. A great alternative that I personally use that works on all browsers is BarbaJS, which I implemented on WordPress too. It isn't as easy to work with as a simple CSS rule compared to VT-API but the BarbaJS documentation is really good. And it supports Gsap among other cool things.

[@codegrid]

I knew that it doesn’t work on all the browsers but there’s a reason behind shared this video! Thanks for the info though (and we’ve already covered Barba in an older video) 😉

[@NerdyCodeCrafter]

that's impressive work sir!

[@codegrid]

🙏🏽

[@prithivimagar126]

Awesome bro love your work ❤❤❤

[@codegrid]

Thanks

[@Fnydo]

Your video are next level

[@codegrid]

🙏🏽

[@sumit3322]

next video with react

[@codegrid]

Will give it a shot!

[@Way_Of_The_Light]

Excellent 🙌

[@codegrid]

🙏🏽

[@abiduix3609]

Legend

[@MACH_SDQ]

Very gooooood !!!!

[@codegrid]

Thanks!

[@HiteshBhardwaj-k1e]

In next js we can easily do this by using framer motion's Animate Presence and popLayout Method instead of using wait method.

[@LEGEND-r2x-r1o]

Sir can you please teach how to get an inverted border radius effect please sir that was quite difficult

[@mohammedaljboli443]

love it .. what is the vscode theme u using

[@codegrid]

Sequoia

[@dnoco]

Does this only work for one page websites? or does it also work for setups such as webflow? where 1 page sites are not ideal, more suited for gsap only transitions

[@виртуоз_ру]

Great job. Maybe even on Nuxt

[@codegrid]

👍🏼

[@cedi2929]

Just to make sure, he said nUxt not nExt.

[@codegrid]

😂

[@виртуоз_ру]

@ I heard. Therefore, it is better to use Nuxt

[@its_shadow439]

which theme do you use

[@verhaxity]

sequoia

[@codegrid]

Sequoia

[@prottaychanda8749]

bro what theme do you use?? pls tell me

[@codegrid]

Sequoia

[@madakiemmanuel6788]

Pls what CDNs do you use? Can you please list them out? Thank you.

[@codegrid]

GSAP, ScrollTrigger and Lenis for this one.

[@madakiemmanuel6788]

@codegrid Awesome, thanks

[@catosgatos]

what shortcut u used for 2:47 ? changing the img1 to img1-img4 instantly

[@codegrid]

It was a cut

[@teetc331_abhisheklonkar8]

When will you be releasing your course?

[@codegrid]

Not in near future

[@m_anees_c1]

❤

[@codegrid]

🙏🏽

[@dracula5752]

looks amazing thought firefox doesn't support View Transitions API?

[@codegrid]

I know that it does not

[@irfansaeedkhan7242]

Brother you have made alot of navbar animation for desktop view plz make some on mobile nav as well

[@codegrid]

Most of them work on mobile too

[@irfansaeedkhan7242]

@@codegrid awesome thank you

[@rayhanislam7518]

Please make a section where have 1 section has multiple images. which scrolled horizontally. on the otherside has sticky scroll.

[@codegrid]

You can share the demo link in the free server! Thanks

[@notrushi]

hey were you a music producer before ?

[@codegrid]

Nope 😅

[@davidniositech]

Thanks, very cool, but it would be soooo much cooler if you make all your codes responsive...

[@codegrid]

👍🏼

[@veildsgn]

what is your vscode theme

[@verhaxity]

sequoia

[@codegrid]

Sequoia

[@aryanpanja2074]

why don't you make videos on reactjs or nextjs??

[@codegrid]

I do but not very often. And I have mentioned multiple times why I don’t. (makes the content less accessible, experienced devs who use react/next can take the js logic and use it with whatever framework they are using, etc)

[@nickwoodward819]

Another react vote please

[@codegrid]

👍🏼

[@gametechz_]

Need react videos...for these types of design's

[@codegrid]

👍🏼

[@code.design]

Great they finally are developing this. However it is still a working draft. Which should not be used in production, on the other hand, people who demand such websites usually have the latests browsers. Regardless for now my agency sticks with barba.js Thanks for the tutorial though!

[@codegrid]

Yeah I was aware that it doesn’t support all browsers yet! But thanks for the info though

[@tony.andrianjaka]

that's the first time I heard about this view transition very very helpful for me so thank u🫡🫡

[@codegrid]

🙏🏽

[@ebibek1091]

What I really want to know is How those the mobile view looks like!!...🫨🫨