Create Jaw-Dropping UIs with Simple Animated View Transitions and Container Queries

Using container queries in combination with view transitions makes for some fluid and engaging UIs. And it just gets better when you bring in a powerful asset mangement provider like Cloudinary. This video is sponsored by Cloudinary.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
01:08 Astro + Tailwind Setup
02:57 Container Query Basics
04:59 Integrating Cloudinary
08:46 Building The Home Page
10:00 Building The Product Grid
11:42 Adding View Transitions
14:42 Adding Cloudinary AI

[regibyte]

Astro and view transitions! what a best!

Thank you Jack for the amazing video, it's nice to see your excitement and expertise in action, as always!

[alvaroaquije]

really hope nextjs also adopts the ViewTransitions API too, dope video man!

[lucastswick]

Wow, those transitions are smooth! Having used animation tools like GSAP in the past, which require knowing enough about the layout to determine start/end coordinates for objects to tween to, I am very excited about the ease of implementation you've demonstrated. Thank you!

[saidakhrarov]

Remember how difficult it was to set up view transitions in React, before any native browser api or any framework had it built-in? Pepperidge farm remembers

[pedromenezes]

Your videos and explanations always get me excited to try out new stuff and have fun. Thanks again!

[mounis]

I'm pretty sure a bun video is in the making!

[OneBrighDay]

Great video. I used locally hosted images and Astro’s Image component, it was amazing. Thanks for the tut. I have to work on a way to make this more dynamic because this would be great as part of a product page on an e-commerce site.

[zsiddiqi]

Great content Jack. If you could help with a few things please:

1. How you highlight selected parts of code in your videos?
2. If you could share the dot files for your cool zsh prompt.
3. Which vscode plug-ins/theme you use

Thanks in advance.

[randompointlessness]

After watching this guy play with code in all sorts of technologies, I renounce myself as an experienced developer, he is like the AI 😅

[mishos]

Hi jack, love your content. Can you tell me where can I see tutorial to how upload file and handle locally in Nextjs API?

[regibyte]

Can you make a video on session-based auth with astro? Due to it being an MPA it kinda confuses the newbies who've only seen token based auth with SPA and NextJS libraries.
Would be nice!
I think Remix has a pretty good auth example on their scaffold

[digitalsahara]

When is your next js course coming out?

[airixxxx]

When you make a UI component like the ResponsiveCard, isn't it better to have a @container wrapper inside the component so it doesn't depend on a layout made using container queries? It would make the component more reusable on any layout I think.

[tj]

I'm starting to see how astro might be the react killer... or consumer

[liquidrider]

Wish this was done in vanilla CSS. Using tailwind is a negative IMO. This being the prime exampl, e @1:37. Tailwind is to CSS like jQuery was to JavaScript.

[kihonq]

Jack, for the love of God, please share your shell config. I want mine to look exactly like yours. Pretty, please.

[DavidWoodMusic]

Jack can you provide a link to this store I would like to buy one futuristic car please thank you

[calvinwilliams]

can I use view transition for React js

[mctrafik]

Iono. As a react dev this code feels hardly readable. Not sure if it's tailwind or the div soup you got going on that's making it hard. Maybe the focus of this video should have been on css transitions since that's what everyone in the comments is ultimately impressed with.