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

[@trimonmusic]

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

[@kissmyussr1993]

If I were taught like that at my college I would've already been an L11 at Google

[@parlor3115]

When your mom walks in on you

[@XDarkGreyX]

Thanks to you I knew what was coming... or so I thought. The number of times he said ass made me giggle like a child a bit too much...

[@steamer2k319]

About time someone came out with a foolproof plan to get one's ass moving. I'm going to forward this helpful vid to my roommate.

[@arunkarnati]

💯😂

[@pilearn1266]

The best ai youtuber

[@prashant_yi]

Copying from Twitter

[@hardikpatel2021-o3d]

FR

[@manojramesh4598]

​@@hardikpatel2021-o3dnot really actually

[@ooogabooga5111]

Copyleft under GPL v3

[@Codepiles]

The best programming language related KZbinr.

[@wlockuz4467]

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

[@DanelonNicolas]

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

[@blackkitty_42]

on the ass-tro site nonetheless

[@jcy089]

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.

[@beatsandstuff]

yeah, but you get to morph asses, so get going and relearn

[@mosch1811]

For frontend developer learning Astro and all its concepts shouldn’t really be as hard. A short look into the docs and you will know most of the stuff

[@cool_dude_like_really]

​@@mosch1811astro really feels like it's mostly just HTML

[@shayanzamani9907]

I literally learned Astro right before I started building my personal website and it didn't take me more than 3,4 days. You just need to be fluent in HTML, CSS, and JavaScript. BTW, Astro is just awesome and dead simple for the most part, you'll love having it added to your tech stack.

[@Kevin-jc1fx]

@@mosch1811 The big concern is opportunities. It can be fun for personal or freelance projects were you enjoy full autonomy but there are little chances it will help in your current or future job.

[@ciach0_]

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

[@kpodp0ra]

lot of asses out there

[@LukeBarousse]

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

[@georgios_georgiou]

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

[@shayanzamani9907]

Can't agree more lol

[@mitchellmnr]

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

[@kollpotato]

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

[@fuzzy-02]

And I am proud of you son. I mean, potato

[@kollpotato]

@@fuzzy-02 Thank ya

[@Owapawa]

Smooth stuff! Is there a way to see where and how you implemented that?

[@kollpotato]

@@Owapawa It's really simple with Tailwind, you just add transitions-colors duration-500 to the body

[@shayanzamani9907]

Oh cool@@kollpotato

[@adicandra9940]

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.

[@devprog001]

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

[@mfpears]

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.

[@kashanahmad8014]

Don't really see anything being rough other than the image sources, which you can handle pretty easily using a build-time js object that just dumps the sources wherever you want it to.

[@mfpears]

@@kashanahmad8014 it always seems that way until you have to get something done. Even in this video we see a few gotchas.

[@kashanahmad8014]

@@mfpears yet none of us has given it a try yet we're here to complain eh?

[@mfpears]

@@kashanahmad8014 I don't need to try it. It's new, and routing is complicated.

[@kashanahmad8014]

@@mfpears New doesn't mean bad unless you have evidence, which you don't have until you try. I just created a simple 2-page app and it looks pretty solid. Try it yourself. Routing has never been less complicated, ever seen one of those client-side routers in an enterprise react app?

[@samkim5612]

Awesome video, learning and laughing at the same time.

[@kingmidasthagoat]

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

[@davidkurniadiweinardy9603]

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

[@boogiman007]

your humor has gone to another level

[@Carhill]

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

[@Shaheer-xs5os]

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 😅✌

[@efdezpolo]

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

[@faheemrhodajackson2470]

Ass1 and Ass2... your assistance was greatly appreciated

[@DryBones111]

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.

[@combinio9533]

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

[@modernkennnern]

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.

[@quintencabo]

Yeah but like when do you actually control multiple domains?

[@mfpears]

​@@quintencaboI think the use case would be embedded media. Because yeah, headers and footers tend to be site-specific. But imagine KZbin provides embedding code that includes the right view transition, so when you want to continue watching on KZbin it smoothly transitions. Images could work too. Whatever site is hosting the media would have to treat it like a public API.

[@rand0mtv660]

To be honest I never thought about cross site transitions for something like this. I always thought about this being a single site experience. To me it also seems like a security issue if someone can potentially use smooth transition to some crappy domain which a regular user wouldn't notice. To me same site transitions make more sense to give your users a bit nicer UX in certain cases and sense of direction and change when changing pages. I personally wouldn't want KZbin transitioning to Google Docs for example because those two are totally different. I might change my mind when I actually see this in practice.

[@modernkennnern]

@quintencabo have I misunderstood the spec? According to MDN: > Note: The View Transitions API doesn't currently enable cross-document view transitions. I understood that as "going from domainCom/cats to domainCom/dogs is not supported", but if that actually means "going from domainCom/cats to otherDomainCom/dogs" tgen it's a non-issue

[@r-i-ch]

The transitions are game-changing for your User's "UX" - Animations provide context for "what just happened"/"how did I get here". They show a hierarchical-relationship in a hit-you-in-the-face-with-a-tennis-racket obvious way. As the dev/designer you know way more about what/why your UI changes than your user will. The whole transitioning thing really shines when you are implementing a Single-Page App. Sure, it would be neat to transition to another website, but that website is someone else's problem (someone else's literal domain) so if you really really want to go there, maybe add the other site in an that you do have control over?

[@KJOB]

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

[@devdhaif]

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

[@taiwojolomi]

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

[@bobdpa]

Great job. Ass usual.

[@bone_broth_000]

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

[@hbfl3x50]

I have been an Astro fan ever since I discovered it

[@deado7282]

So u were using go or hugo?

[@heroe1486]

Yugo

[@beyondfireship]

Hugo

[@deado7282]

@@beyondfireship Because you are already here: May I ask for go content? It seems like the perfect programming language additionally to js. If you find a week without a js framework release...

[@abraham_o]

The rants about assess is so beautiful... 😂

[@krzysztofkrol5374]

I LOVE ASSTRO

[@MegaTeeruk]

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

[@roopak973]

That's a kick-ass example

[@theblackestfern]

That's a nice Ass-tro tutorial indeed

[@erik-fisher]

This AI sound is almost perfect.

[@yajirushik2871]

The ultimate asses guide, one to interest everyone.

[@Kenpassion]

Rowdy children audible at 1:46 Glad I’m not the only one this happens to 😂

[@terabit7400]

Damn! Those are really nice АSSES 🔥😉

[@arunkarnati]

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

[@Zepi2509]

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

[@timjini3197]

At the end it was quite funny 😂

[@TheGaoNan]

Hey Fireship, What kind of microphone do you use?

[@johnRivs]

What's the !. thing seen at 2:59?

[@francoisguezengar6255]

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

[@DrKartoffelsalat]

Tbh, something like remember dark-mode preference is ideal for local storage since your user probably wants to remember that for the next time they visit.

[@arcasoy]

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

[@gabrielbrandao1106]

Love your content, keep it up :)

[@JimMendenhall]

Those are some sweet ass animations!

[@Souljacker7]

What is this session comment? Is this FIreship's channel, but with people hating it?

[@ciscoramonsanchez5192]

this got wild really fast

[@sohammalve8958]

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

[@utof]

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

[@wahyusa]

Can't wait for more browser support

[@akshitnassa6833]

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

[@powerpcx86]

This is fantASStic, i love ASStro

[@CreativeTutorialsWeb]

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

[@LeoFernándezDelgado]

You're the best!

[@btg323]

This video kicks ass

[@SteveHazel]

well. i was entertained.

[@FlyingPenguino]

That ass demo was kickass

[@raduflp]

Hard to understand what is part of the platform and what is specific to Astro

[@j1d7s]

Was your example inspired by the recent post on hacker news regarding ass holes, which of course are wells dug in the desert by asses?

[@jamesscarr3372]

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

[@FauzulChowdhury]

Asstonishing feature.

[@noe_122]

i lost it at the end 😂😂😂😂

[@Noritoshi-r8m]

That's a fine ass app you got there

[@thelazycoder64]

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

[@indieshd]

He had to say our asses😅😅.. he's awesome

[@chrisalexthomas]

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

[@MrExiztence]

This is fantasstic!

[@amirnoorani5017]

You are so good and funny 😂

[@292eur]

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

[@skammernet]

I had to change "astro:beforeload" to "astro:after-swap" for the event listener to work.

[@vaisakh_km]

That's a greatAss video...

[@chinmayghule8272]

How to do these page transitions using only React?

[@VixieTSQ]

I wonder if this is possible in pure sveltekit

[@tomich20]

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.

[@YuriG03042]

JS usually blocks the DOM and decreases your lighthouse score

[@ieatthighs]

some people prefer to have js disabled, and it's also a nice flex to do stuff without js

[@FabioRotondo]

I'd like to see a similar tutorial for Svelte

[@shivam-codes]

while(1) ass_count

[@cabanford]

Asses! (The real meaning) 😂

[@jaroslavhuss7813]

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

[@lukobranko]

You are an effin' legend. ASS!!!

[@venir_dev]

Jeff is subconsciously telling us to move our asses and try this ourselves

[@zorkdabork]

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

[@G0NZA11]

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

[@ThanHtutZaw3]

Why animation doesn't working in mobile ? It needs chrome version but I have required version of chrome. Also Animation are not disabled in mobile devices .

[@HeyWorld-o8j]

Chrome 111 or latest on iPhone or Andriod?

[@ThanHtutZaw3]

chrome 116 Android 12@@HeyWorld-o8j

[@iwaduarte]

Client side routing is now a feature in Astro.

[@jokerdarkknight2508]

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

[@sahilahmed3066]

Tailwind Fold, I hope you already found it

[@hugodsa89]

This guy is a winner 🤣

[@roguesherlock]

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

[@__azt]

And the award for Quotation of the Year goes to - "How to move your ass from one page to another" -- fireship.

[@allan_archie]

What about doing it in native HTML and JS?

[@tomfancode]

Astro is next js killer.

Can you do Turbo in 100seconds?

[@prajwalaradhya4379]

"How to move your ass from one page to another" 👌

[@rCinCLined]

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.

[@DamirSecki]

I had to rewatch the last minute several times as all the ass-es distracted me!

[@wattsfield1889]

Please. Someone give the link to that face in the thumbnail.. it's so magestic

[@toxaq]

In a video about Astro he made an Ass Trope. 🥇