Mind-blowing page animations are easy now... View Transitions API first look
Вставка
- Опубліковано 12 сер 2023
- 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.build/en/guides/vi...
SvelteFire Docs sveltefire.fireship.io
I built a JS framework • I built a JavaScript f...
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
"Grid of Asses", this is why I chose Fireship for my programming education needs 👍
If I were taught like that at my college I would've already been an L11 at Google
When your mom walks in on you
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...
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.
💯😂
The best ai youtuber
Copying from Twitter
FR
@@hardikpatelhdhenot really actually
Copyleft under GPL v3
The best programming language related UA-camr.
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.
yeah, but you get to morph asses, so get going and relearn
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
@@mosch1811astro really feels like it's mostly just HTML
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.
@@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.
-Ass- as a mobile dev turned into a web dev, this makes me so happy.
I love how you move this asses from one page to another
on the ass-tro site nonetheless
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
Can't agree more lol
"That explicitly tells the View Transitions API how to move your ass from one page to another" - Jeff, 2023
lot of asses out there
"That tells the API how to move your a$$ from one page to another" 🤣i'm dying lolz
You had me on my a$$ with this one.
Well played, well played!
2:15 I am the one who added smooth transitions when toggling themes. I am proud of myself.
And I am proud of you son. I mean, potato
@@fuzzy-02 Thank ya
Smooth stuff! Is there a way to see where and how you implemented that?
@@Owapawa It's really simple with Tailwind, you just add transitions-colors duration-500 to the body
Oh cool@@kollpotato
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.
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.
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.
@@kashanahmad8014 it always seems that way until you have to get something done. Even in this video we see a few gotchas.
@@mfpears yet none of us has given it a try yet we're here to complain eh?
@@kashanahmad8014 I don't need to try it. It's new, and routing is complicated.
@@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?
It's videos like this that make me proud to be a subscriber of Fireship content 🔥
Amazing! I really enjoy the way where it is all going in terms of web-dev (classic MPA with SPA-best features).
Awesome video, learning and laughing at the same time.
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 😅✌
I LOVE ASSTRO
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.
Fireship delivers knowledge and humor... Gets me everytime 😂💥💥
"Our asses now dances around our astro site" got me rolling in the ground 💀💀
your humor has gone to another level
My blog has literally two posts. Straight to the feelings.
You're a live saver! Now I know how to move my ass gracefully,
Love your content, keep it up :)
Great job. Ass usual.
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.
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.
Yeah but like when do you actually control multiple domains?
@@quintencaboI think the use case would be embedded media. Because yeah, headers and footers tend to be site-specific. But imagine UA-cam provides embedding code that includes the right view transition, so when you want to continue watching on UA-cam it smoothly transitions. Images could work too. Whatever site is hosting the media would have to treat it like a public API.
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 UA-cam transitioning to Google Docs for example because those two are totally different. I might change my mind when I actually see this in practice.
@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
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?
I have been an Astro fan ever since I discovered it
You're the best!
The rants about assess is so beautiful... 😂
That's a cool way to transition an ass from page to another
Really cool
Those are some sweet ass animations!
This is fantasstic!
That's a kick-ass example
"...how to move your ass from one page to another..."
Pure comedy gold. 😂
The ultimate asses guide, one to interest everyone.
Damn! Those are really nice АSSES 🔥😉
That's a greatAss video...
That's a nice Ass-tro tutorial indeed
This video kicks ass
This is fantASStic, i love ASStro
At the end it was quite funny 😂
Asstonishing feature.
You are so good and funny 😂
this got wild really fast
That's a fine ass app you got there
Can't wait for more browser support
This AI sound is almost perfect.
That ass demo was kickass
Would love to see how to achieve this with the plain View Transitions API (without Astro or any other frameworks)
Great ass tutorial!
well. i was entertained.
This guy is a winner 🤣
Omg 😂😂😂 so informative
I love you, Jeff
Man you are too creative making content as well as jokes.🤣
You are an effin' legend. ASS!!!
Great ass transitions
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 😂😂😂😂
FantASStic
"like that our asses now dance around our Ass'tro site with Grace and Style" 😂Fireship at its best. Love your content!
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 :/
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
At 0:26 it says you need Next.js for SEO. But does Vite offer built in SSR, so is this diagram still accurate?
Ich benutze Astro für ein Projekt und finde es super! Kennst du Elm und was hältst du davon?
fantASStic
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.
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.
JS usually blocks the DOM and decreases your lighthouse score
some people prefer to have js disabled, and it's also a nice flex to do stuff without js
"Move your ass from one page to another"... Gold
Hey Fireship,
What kind of microphone do you use?
that's a lot asses this early in the morning for me
Astro is next js killer.
Asstro seems promising
did u use voice cloning for this video cuz in some places the voice sounds a bit shaky, or am i going insane?
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
What happened to the frame html element? Aren't islands just frames?
Asses! (The real meaning) 😂
Thats ASSome
I just forked your sveltefire repo recently., I'm trying to write a react version even though react fire already exists
ASSTRO!
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.
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.
Can we use these route animations in Webflow for page transitions?
He had to say our asses😅😅.. he's awesome
So u were using go or hugo?
Yugo
Hugo
@@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...
FantASStic 😂
Bad ass
Another JS framework :)
I'd like to see a similar tutorial for Svelte
Asses - nice one 😂
Does anyone know what extension he used to see the package size?
Jeff please, can u make a tutorial how to make authtentication with Astro in the most possible secure way?
This type of behavior can be easily achieved with Unpoly too.
I would recommend session storage for keeping state between navigation instead of local storage
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.
4:35 🎉
Noice
Pure ass magic
Jeff for Pres! 🔥 🚢
Best asses on UA-cam. ASStronomical!
In a video about Astro he made an Ass Trope. 🥇
Client side routing is now a feature in Astro.