Mind-blowing page animations are easy now... View Transitions API first look
BFBeyond Fireship@beyondfireship · 463K subscribers
- Views
- 278K
- 277,718
- Outlier
- ×0.9
- Median 316K
- Length
- 5:01
- Published
- Aug 13, 2023
- Sunday
- Comments
- 360
- 11.2K likes
Script
How it's written
- Words
- 1,178
- Words a minute
- 235
- Reading time
- 5 min
- Segments
- 4
The hook
0:00–0:26in today's video you'll learn how to do these awesome mobile like hero animations that transfer an image from one page to the next with just two lines of code almost exactly one year ago I rebuilt the fireship i o course platform using svelte Hugo and a custom built router called flamethrower I like to have fun and live dangerously by Rolling my own stuff but the stack is probably not ideal for most people in fact I almost chose Astro for this project but I declined it because it was missing one key feature and that's the ability to do
Structure
in today's video you'll learn how to do these awesome mobile like hero animations that transfer an image from one page to the next with just two lines of code almost exactly one year ago I rebuilt the fireship i o course platform using svelte Hugo and a custom built router called flamethrower I like to have fun and live dangerously by Rolling my own stuff but the stack is probably not ideal for most people in fact I almost chose Astro for this project but I declined it because it was missing one key feature and that's the ability to do client-side routing that transfers JavaScript state from one route to another unlike SSR Frameworks like NAX nux and spill kit that have their own client-side router Astro always does a full page reload whenever you click a link or navigate to a new page and that's perfectly fine for your developer blog that has two posts on it but it makes it far more difficult for a website like fireship I O that has user authentication progress tracking video players and stuff like that well a lot has changed over the last year and just a few days ago Astra released a new view transitions API which is based on the underlying browser API of the same name as you can see here it's an experimental API that's not supported in every browser but the cool thing about Astro is that it provides a fallback for browsers that don't support it for me this has always been the missing link in Astro if I were rebuilding the Fire Ship IO website today I would likely use Astro because it has an awesome content management system out of the box delivers awesome performance by not shipping a ton of JavaScript and allows you to easily integrate any framework you want or multiple Frameworks at the same time in fact I've already shipped an astro project to production using the view transitions API if you go to the documentation for svelt fire you'll notice you get this fading animation between routes and if you open the
Watch from 0:00browser console you should notice a soft navigation was detected which is what you would expect in something like nexjs or spell kit the implementation was dead simple I simply imported The View transitions component into my main layout and added it to the head of the HTML now if we go and click on a link on the website you'll notice in the browser Dev tools that it adds this view transition pseudo element around the entire page to handle that fading animation that's pretty cool but there are some trade-offs here first of all it's going to require some JavaScript to get this done currently it looks like it sits at around 4.5 kilobytes which is Tiny and will have virtually no impact on the page load performance however you can no longer brag to your girlfriend about how you ship zero JavaScript to the client in addition it changes the way you have to think as a developer the API kind of works like turbo links where JavaScript that was running on every page now only runs once on my website we use JavaScript to toggle between light and dark mode with view transitions this feature still works on the initial page load but after the first navigation to a new page all the JavaScript for light and dark mode stops working and it goes back to the default light mode the reason that happens is because we have a JavaScript function that looks in local storage for the color preference and then updates it for every new page this script only runs once on the initial page load however we can easily run it on any soft navigation as well by listening to the custom Astro before load event and now it'll update the color preference and add the proper class whenever the route changes that's an easy fix but another problem is that my top navigation component which contains the button to toggle between light and dark mode is no longer working for the same reason you'll notice in this function how it's grabbing the elements from the Dom and then adding the event listeners to them but when
Watch from 1:31those elements are replaced via soft navigation it stops working after the initial page load we could address this in the same way we did last time but there's actually an easier way instead we can go into the HTML for this component and on the root element we'll use the transition persist directive this will take the current element along with any state attached to it and transfer it over to the next page which means any JavaScript state or event listeners attached to it will still work as normal and that works really well with Astros Island architecture where you separate your interactive components from the static HTML in addition you can also give transitions names which is useful if you have one component that's in a different location on the next page but the coolest thing about view transitions is how easy they make route animations by default it does that fade animation but now let's imagine that instead we want the main content to slide in from the right to accomplish that all we have to do is find the main element then use transition animate followed by slide and now our main content magically slides in from the right and out to the left in addition if you don't like the default animations you can fully custom is their behavior but by far the coolest animation is more like in this Astro music library example you can see how we go from a list of album covers to a single album with the album image never leaving the page it just magically slides into the right spot in the next page this is often called a hero animation on IOS and Android and just provides a really smooth experience that you don't normally get on the web and to show you how easy this is in Astro I created a quick demo that has a bunch of pictures of asses here on the main page we have a grid of different asses then each individual ass links to a dedicated ass page most importantly the image of the ass is the same both in the thumbnail
Watch from 3:02and on the dedicated page now in the list page you'll notice that I've created a transition name for each ass like ass 1 Ass 2 ass 3 and so on then in the dedicated page for each ass we add that same exact code to the image over there as well that explicitly tells the view transitions API how to move your ass from one page to another and just like that our asses now dance around our Astro site with Grace and style thanks for watching and I will see you in the next one
Watch from 4:34Full transcript
- 0:00
in today's video you'll learn how to do these awesome mobile like hero animations that transfer an image from one page to the next with just two lines of code almost exactly one year ago I rebuilt the fireship i o course platform using svelte Hugo and a custom built router called flamethrower I like to have fun and live dangerously by Rolling my own stuff but the stack is probably not ideal for most people in fact I
- 0:20
almost chose Astro for this project but I declined it because it was missing one key feature and that's the ability to do client-side routing that transfers JavaScript state from one route to another unlike SSR Frameworks like NAX nux and spill kit that have their own client-side router Astro always does a full page reload whenever you click a link or navigate to a new page and that's perfectly fine for your developer
- 0:40
blog that has two posts on it but it makes it far more difficult for a website like fireship I O that has user authentication progress tracking video players and stuff like that well a lot has changed over the last year and just a few days ago Astra released a new view transitions API which is based on the underlying browser API of the same name as you can see here it's an experimental API that's not supported in every
- 1:00
browser but the cool thing about Astro is that it provides a fallback for browsers that don't support it for me this has always been the missing link in Astro if I were rebuilding the Fire Ship IO website today I would likely use Astro because it has an awesome content management system out of the box delivers awesome performance by not shipping a ton of JavaScript and allows you to easily integrate any framework you want or multiple Frameworks at the
- 1:21
same time in fact I've already shipped an astro project to production using the view transitions API if you go to the documentation for svelt fire you'll notice you get this fading animation between routes and if you open the browser console you should notice a soft navigation was detected which is what you would expect in something like nexjs or spell kit the implementation was dead simple I simply imported The View transitions component into my main
- 1:41
layout and added it to the head of the HTML now if we go and click on a link on the website you'll notice in the browser Dev tools that it adds this view transition pseudo element around the entire page to handle that fading animation that's pretty cool but there are some trade-offs here first of all it's going to require some JavaScript to get this done currently it looks like it sits at around 4.5 kilobytes which is Tiny and will have virtually no impact
- 2:03
on the page load performance however you can no longer brag to your girlfriend about how you ship zero JavaScript to the client in addition it changes the way you have to think as a developer the API kind of works like turbo links where JavaScript that was running on every page now only runs once on my website we use JavaScript to toggle between light and dark mode with view transitions this feature still works on the initial page load but after the first navigation to a
- 2:24
new page all the JavaScript for light and dark mode stops working and it goes back to the default light mode the reason that happens is because we have a JavaScript function that looks in local storage for the color preference and then updates it for every new page this script only runs once on the initial page load however we can easily run it on any soft navigation as well by listening to the custom Astro before load event and now it'll update the
- 2:45
color preference and add the proper class whenever the route changes that's an easy fix but another problem is that my top navigation component which contains the button to toggle between light and dark mode is no longer working for the same reason you'll notice in this function how it's grabbing the elements from the Dom and then adding the event listeners to them but when those elements are replaced via soft navigation it stops working after the
- 3:06
initial page load we could address this in the same way we did last time but there's actually an easier way instead we can go into the HTML for this component and on the root element we'll use the transition persist directive this will take the current element along with any state attached to it and transfer it over to the next page which means any JavaScript state or event listeners attached to it will still work as normal and that works really well
- 3:26
with Astros Island architecture where you separate your interactive components from the static HTML in addition you can also give transitions names which is useful if you have one component that's in a different location on the next page but the coolest thing about view transitions is how easy they make route animations by default it does that fade animation but now let's imagine that instead we want the main content to
- 3:46
slide in from the right to accomplish that all we have to do is find the main element then use transition animate followed by slide and now our main content magically slides in from the right and out to the left in addition if you don't like the default animations you can fully custom is their behavior but by far the coolest animation is more like in this Astro music library example you can see how we go from a list of album covers to a single album with the
- 4:09
album image never leaving the page it just magically slides into the right spot in the next page this is often called a hero animation on IOS and Android and just provides a really smooth experience that you don't normally get on the web and to show you how easy this is in Astro I created a quick demo that has a bunch of pictures of asses here on the main page we have a grid of different asses then each individual ass links to a dedicated ass
- 4:30
page most importantly the image of the ass is the same both in the thumbnail and on the dedicated page now in the list page you'll notice that I've created a transition name for each ass like ass 1 Ass 2 ass 3 and so on then in the dedicated page for each ass we add that same exact code to the image over there as well that explicitly tells the view transitions API how to move your
- 4:51
ass from one page to another and just like that our asses now dance around our Astro site with Grace and style thanks for watching and I will see you in the next one
Description
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 https://fireship.io/pro
View Transitions API https://docs.astro.build/en/guides/vi...
SvelteFire Docs https://sveltefire.fireship.io
I built a JS framework • I built a JavaScript framework
More from Beyond Fireship
×6.45:04Subtle, yet Beautiful Scroll Animations
Beyond Fireship2M views
×2.98:33Most overpowered way to build mobile apps?
Beyond Fireship925K views
×2.88:23This UI component library is mind-blowing
Beyond Fireship878K views
×2.76:17Industrial-scale Web Scraping with AI & Proxy Networks
Beyond Fireship854K views
