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

No video

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

Рет қаралды 245,658

Күн бұрын

Learn about the new View Transitions API in Astro and how it can add awesome route animations to your website.
#webdevelopment #javascript #code
Upgrade to Fireship PRO fireship.io/pro
View Transitions API docs.astro.bui...
SvelteFire Docs sveltefire.fir...
I built a JS framework • I built a JavaScript f...

Пікірлер: 355

@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

@PrashantKumar-nk2ck Жыл бұрын

Copying from Twitter

@hardikpatelhdhe Жыл бұрын

@manojramesh4598 Жыл бұрын

@@hardikpatelhdhenot really actually

@ooogabooga5111 Жыл бұрын

Copyleft under GPL v3

@Codepiles Жыл бұрын

The best programming language related KZfaqr.

@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

@user-yy3ki9rl6i Жыл бұрын

on the ass-tro site nonetheless

@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

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

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

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

@faheemrhodajackson2470 29 күн бұрын

Ass1 and Ass2... your assistance was greatly appreciated

@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

@devprog001 Жыл бұрын

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

@efdezpolo Жыл бұрын

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

@midas6659 Жыл бұрын

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

@KJOB Жыл бұрын

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

@davidkurniadiweinardy9603 Жыл бұрын

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

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

@krzysztofkrol5374 Жыл бұрын

I LOVE ASSTRO

@samkim5612 Жыл бұрын

Awesome video, learning and laughing at the same time.

@boogiman007 Жыл бұрын

your humor has gone to another level

@abraham_o 6 ай бұрын

The rants about assess is so beautiful... 😂

@bobdpa Жыл бұрын

Great job. Ass usual.

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

@bone_broth_000 Жыл бұрын

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

@adicandra9940 10 ай бұрын

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.

@combinio9533 11 ай бұрын

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 KZfaq provides embedding code that includes the right view transition, so when you want to continue watching on KZfaq 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 KZfaq 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?

@taiwojolomi Жыл бұрын

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

@hbfl3x50 Жыл бұрын

I have been an Astro fan ever since I discovered it

@theblackestfern Жыл бұрын

That's a nice Ass-tro tutorial indeed

@erik-fisher Жыл бұрын

This AI sound is almost perfect.

@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

@devdhaif Жыл бұрын

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

@ciscoramonsanchez5192 Жыл бұрын

this got wild really fast

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

@yajirushik2871 Жыл бұрын

The ultimate asses guide, one to interest everyone.

@arcasoy Жыл бұрын

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

@timjini3197 Жыл бұрын

At the end it was quite funny 😂

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

@btg323 Жыл бұрын

This video kicks ass

@user-cg4id9ig3y 5 ай бұрын

You're the best!

@SteveHazel Жыл бұрын

well. i was entertained.

@nxte8506 Жыл бұрын

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.

@Kevin-jc1fx Жыл бұрын

I was wondering how to go about this in react. Do you have a codepen or github repo where we could have a look at your solution? If so, please do share. Thank you.

@noe_122 11 ай бұрын

i lost it at the end 😂😂😂😂

@wahyusa Жыл бұрын

Can't wait for more browser support

@terabit7400 Жыл бұрын

Damn! Those are really nice АSSES 🔥😉

@JimMendenhall Жыл бұрын

Those are some sweet ass animations!

@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

@FauzulChowdhury Жыл бұрын

Asstonishing feature.

@roguesherlock Жыл бұрын

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

@Zepi2509 Жыл бұрын

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

@gabrielbrandao1106 Жыл бұрын

Love your content, keep it up :)

@amirnoorani5017 Жыл бұрын

You are so good and funny 😂

@powerpcx86 Жыл бұрын

This is fantASStic, i love ASStro

@FlyingPenguino Жыл бұрын

That ass demo was kickass

@indieshd Жыл бұрын

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

@arunkarnati Жыл бұрын

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

@Noritoshi-r8m Жыл бұрын

That's a fine ass app you got there

@tomfancode 11 ай бұрын

Astro is next js killer.

@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

@cabanford Жыл бұрын

Asses! (The real meaning) 😂

@a_tabaza Жыл бұрын

I love you, Jeff

@PlotTwists Жыл бұрын

Asstro seems promising

@lukobranko Жыл бұрын

You are an effin' legend. ASS!!!

@dcdales Жыл бұрын

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.

@fahadnadeem2458 Жыл бұрын

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 :/

@Sovereign589 Жыл бұрын

I think this doesn't have to be s show stopper. There are probably dozens of blogs about that. I mean most programmers aren't designers

@vaisakhkm783 Жыл бұрын

That's a greatAss video...

@MrExiztence Жыл бұрын

This is fantasstic!

@sohammalve8958 Жыл бұрын

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

@FabioRotondo Жыл бұрын

I'd like to see a similar tutorial for Svelte

@toxaq Жыл бұрын

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

@utof Жыл бұрын

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

@user-qr1yr6kq5r 5 ай бұрын

I mean, thats so cool cause im hearing ass ass ass and still learning something

@vaibhavbhawsar323 11 ай бұрын

Why is this so interesting when you could do it in Flash more than 20 years ago without thinking about it so much? I feel like we have lost a lot of time. #asses

@hugodsa89 Жыл бұрын

This guy is a winner 🤣

@prajwalaradhya4379 Жыл бұрын

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

@kisaragi-hiu Жыл бұрын

Honestly I don't even care about View Transitions. The ViewTransition Astro component implements a client side router, which (a) finally answers my confusion on how astro-spa was possible and (b) is something that matters way more than View Transition goodies.

@venir_dev Жыл бұрын

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

@vasiovasio Жыл бұрын

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

@namaefumei Жыл бұрын

Omg fck frontend, everything is getting easier but much more complicated. God damn it.

@bossgd100 Жыл бұрын

😂 wait we have a new framework for you

@aubenhill Жыл бұрын

Great ass tutorial!

@wattsfield1889 Жыл бұрын

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

@raduflp Жыл бұрын

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

@jaroslavhuss7813 Жыл бұрын

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

@TheGaoNan Жыл бұрын

Hey Fireship, What kind of microphone do you use?

@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