Mind-blowing page animations are easy now... View Transitions API first look 

"Grid of Asses", this is why I chose Fireship for my programming education needs 👍

The best ai youtuber

"That explicitly tells the View Transitions API how to move your ass from one page to another" - Jeff, 2023

I love how you move this asses from one page to another

Two lines of code for a nicer animation but be prepared to learn a new framework, re-learn how do develop JS AND spend hours debugging why all your JS interactions are broken. Yep, sums up frontend development accurately.

-Ass- as a mobile dev turned into a web dev, this makes me so happy.

Dang it love Jeff’s puns he deliberately made the ass page and item just to say now you can move your ass from one page to another 😂 give this man a pun Nobel already

"That tells the API how to move your a$$ from one page to another" 🤣i'm dying lolz

Thank you so much for this video. I linked it to someone to show off Astro's new support for this in v3 while at the same time accidentally discovering the solution to the bug of my button losing interactivity after upgrading my site to use these transitions. Super.

Amazing! I really enjoy the way where it is all going in terms of web-dev (classic MPA with SPA-best features).

It's videos like this that make me proud to be a subscriber of Fireship content 🔥

You had me on my a$$ with this one. Well played, well played!

Awesome video, learning and laughing at the same time.

for the listener problem, just hook everything related to the page initialization(attaching event handler, etc) to "astro:after-swap" event, it will be called when page changed, so it's similar to "DOMContentLoaded" event in a sense.

Dude that stack is so uncommon , only you can come up with such a beautiful and unique thinking, hats off dude.... and I have also renamed my assests to.... ahm... anyways, nice content, keep it up BOI 😅✌

Fireship delivers knowledge and humor... Gets me everytime 😂💥💥

This feels like a low-code router in an unfinished SPA framework. It may be that the ideal solution is way simpler than existing SPA frameworks. So maybe just a little bit of experience with this will reveal some basic patterns that can scale. But I have a feeling it's going to be rough for a while.

2:15 I am the one who added smooth transitions when toggling themes. I am proud of myself.

Love your content, keep it up :)

your humor has gone to another level

My blog has literally two posts. Straight to the feelings.

I have been an Astro fan ever since I discovered it

you making me want to rebuild my personal project that i havent even finish yet

Hanging out with Fireship is going on my bucket list with getting in a foot race with Tom Cruise.

I LOVE ASSTRO

That's a cool way to transition an ass from page to another Really cool

"Our asses now dances around our astro site" got me rolling in the ground 💀💀

You're the best!

The ultimate asses guide, one to interest everyone.

Those are some sweet ass animations!

That's a kick-ass example

This is fantasstic!

Damn! Those are really nice АSSES 🔥😉

Great job. Ass usual.

That's a greatAss video...

This is fantASStic, i love ASStro

This video kicks ass

At the end it was quite funny 😂

The rants about assess is so beautiful... 😂

You are so good and funny 😂

Would love to see how to achieve this with the plain View Transitions API (without Astro or any other frameworks)

this got wild really fast

Asstonishing feature.

You're a live saver! Now I know how to move my ass gracefully,

That's a fine ass app you got there

Can't wait for more browser support

The first time I heard about the View Transitions API (Used to be called something else when Google originally announced it), my immediate reaction was "Why is this not a thing already?" followed by "I can't wait for this" Then when they announced it was an official CSS spec, and that cross-document view transitions are coming in v2 I was really dissapointed. Sure, same-document transitions can simplify things, but they're nothing game-changing. Cross-document on the other hand are when things are getting interresting. View transitions can give you most of the power of SPAs with the user-, and development experience of MPAs. Edit: I originally wrote "site" instead of "document" which might've confused people. Cross-"domain" transititions never even crossed my mind when I wrote this originally. Sorry for the confusion.

That ass demo was kickass

"...how to move your ass from one page to another..." Pure comedy gold. 😂

well. i was entertained.

Great ass tutorial!

This guy is a winner 🤣

This AI sound is almost perfect.

Omg 😂😂😂 so informative

That's a nice Ass-tro tutorial indeed

I love you, Jeff

You are an effin' legend. ASS!!!

At 0:26 it says you need Next.js for SEO. But does Vite offer built in SSR, so is this diagram still accurate?

Man you are too creative making content as well as jokes.🤣

anyone know if it's possible to have dynamic transition names, the list of asses is something you might want to do in a loop, but then transition:name={uniqueTransitionName} doesn't work even even if that same transition:name is also defined on the other page.

Great ass transitions

Q: why is everyone so worried about how not to use Js? Who doesn't use it? Love the state transfer hope sveltekit implements it.

FantASStic

What happened to the frame html element? Aren't islands just frames?

Ich benutze Astro für ein Projekt und finde es super! Kennst du Elm und was hältst du davon?

I can't count how many times FireShip has said the word ass 😂 Overall great tutorial, I'll choose you over any Udemy course any day

i lost it at the end 😂😂😂😂

that's a lot asses this early in the morning for me

Love your content man! I was wondering what do you use for designs? do you design yourself or do you hire someone? I suck at designing so its a demotivation for me to build anything :/

"like that our asses now dance around our Ass'tro site with Grace and Style" 😂Fireship at its best. Love your content!

fantASStic

Hey Fireship, What kind of microphone do you use?

did u use voice cloning for this video cuz in some places the voice sounds a bit shaky, or am i going insane?

I just forked your sveltefire repo recently., I'm trying to write a react version even though react fire already exists

Astro is next js killer.

Asstro seems promising

This type of behavior can be easily achieved with Unpoly too.

Can we use these route animations in Webflow for page transitions?

Thats ASSome

So u were using go or hugo?

I'd like to see a similar tutorial for Svelte

"Move your ass from one page to another"... Gold

I built this same feature in react by hand. At the time view transitions hadn’t been fully announced. I’m just saying people be patient cuz as simple as it looks this shit is hard assf.

Jeff please, can u make a tutorial how to make authtentication with Astro in the most possible secure way?

I would recommend session storage for keeping state between navigation instead of local storage

Client side routing is now a feature in Astro.

FantASStic 😂

Does anyone know what extension he used to see the package size?

Noice

Quality educational content here, a grid of asses, I love it! I sometimes find myself working in a room full of asses, but when I say that, I don't mean donkeys :D

Bad ass

ASSTRO!

What about doing it in native HTML and JS?

Another JS framework :)

what is the name of extension that collapse classes of an element into "..." ?

Asses - nice one 😂

How to do these page transitions using only React?

Should use the CSS overflow: hidden so the content that slides to the left doesn't show overtop the navigation sidebar. Sweet video, though. Fireship rocks.

Pure ass magic

These animation:name only work in Chrome? I've tried it in Firefox and Chromium and it just cross-fades.