In our setup, we will have two pages:
/(index)/best-techs
On the first page, we will only show three images. But on the next one, these three images will move up and the other will show
We need three steps to accomplish the effect above:
<ViewTransitions/>- Shared component
transition:animate="initial"
This case be easily accomplished by creating a BaseLayout.astro and making index.astro and best-techs.astro using them
Next, between these two pages we must have a shared component which we will define our animation
In this case, we created the TechGrid.astro that receives a list of ImageMetadata that contains all data to render an Image.
Finally, by adding transition:animate="initial" to the Image component, that is "shared" by the two pages, Astro can do its magic
<Image
...
transition:animate="initial"
/>One alternative to access all images dynamically inside of the assets folder is to use Astro.glob. It automatically detect the file type and Image from astro:assets requires exactly this type.
type ImageGlob = {
default: ImageMetadata;
};
const images = (
await Astro.glob<ImageGlob>("../assets/**/*.{png,jpg,jpeg,gif,svg}")
).map((image) => image.default);The ImageGlob type is required because the return of await Astro.glob puts everything inside of a property called default