Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

No more page refreshes in Astro projects! 🤩 Experimental view transitions: animate between pages like iPhone apps 👀

Ben Holmes

35,223 subscribers

82,258 views • 2 years ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

9 Comments

Hamed Bahram2 years ago

What tool are you using for screen recording?

Jianqi Pan2 years ago

Currently ios browsers and Firefox don't support it, so hopefully they'll get it up soon!

Jon Kurtis ⚡2 years ago

Animate between pages *like an SPA*

Gaurav2 years ago

Like SPA 😲😲??

emmett naughton2 years ago

Dude thanks for this explanation. Those are so smooth.

Darren Baldwin2 years ago

Feels like straight wizardry

aris2 years ago

”no javascript no css” wtf

Ben Holmes2 years ago

*to clarify, I meant none you have to author! We ship a small script (a couple KBs) for routing, and bundle 1 line of CSS for each transition directive

Sun 🇲🇺2 years ago

Last time I implemented it on my astro site islands stopped working. Can't wait to try this 🤩

Related Videos

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Addy Osmani

79,789 views • 2 years ago

Create Smooth Page Animations With View Transitions 🔄

Create Smooth Page Animations With View Transitions 🔄

Frontend Masters 💻✨

11,536 views • 1 year ago

First look at Next.js' experimental View Transitions support ✨ Powered by Next 15.2 and unstable_ViewTransition

First look at Next.js' experimental View Transitions support ✨ Powered by Next 15.2 and unstable_ViewTransition

Maxi Ferreira

83,744 views • 1 year ago

Introducing Apple Farm Season 2 🍏🧑‍🌾 More projects, more apps, more DeFi 👀 $3,000,000+ in rewards 🤯 Starting July 24th, get ready!

Introducing Apple Farm Season 2 🍏🧑‍🌾 More projects, more apps, more DeFi 👀 $3,000,000+ in rewards 🤯 Starting July 24th, get ready!

Etherlink 🔗

23,577 views • 11 months ago

View Transitions bring seamless transition animations to the browser. Chrome is excited to see official support in Astro 3.0: ~ learn about the journey there!

View Transitions bring seamless transition animations to the browser. Chrome is excited to see official support in Astro 3.0: ~ learn about the journey there!

Addy Osmani

184,151 views • 2 years ago

Wanna see a 90-second speed run of on-page View Transitions?

Wanna see a 90-second speed run of on-page View Transitions?

Chris Coyier

145,861 views • 2 years ago

Astro Bot? More like Astro BOYYYYY.

Astro Bot? More like Astro BOYYYYY.

PlayStation AU

38,771 views • 1 year ago

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

Chrome for Developers

114,560 views • 6 months ago

View Transitions in Next.js 15.2

View Transitions in Next.js 15.2

Alex Sidorenko

65,135 views • 1 year ago

Did some more Bone fanart recently! I really wanted to try storyboarding a few pages from part of the book, but also wanted to animate the scythe spin from one page. Really tried to keep the spirit of the pages/paneling while also treating it like a production storyboard

Did some more Bone fanart recently! I really wanted to try storyboarding a few pages from part of the book, but also wanted to animate the scythe spin from one page. Really tried to keep the spirit of the pages/paneling while also treating it like a production storyboard

Checkers

139,953 views • 2 years ago

Drag a window, tile it into place. 🤩 In #macOSSequoia, it’s even easier to organize your desktop to keep more apps in view. Here’s how to tile your windows.

Drag a window, tile it into place. 🤩 In #macOSSequoia, it’s even easier to organize your desktop to keep more apps in view. Here’s how to tile your windows.

Apple Support

44,377 views • 1 year ago

Milo's Never Ending Story, co-created by our amazing community has hit 67,000 pages! Did you know? You can animate your story page and make your page even more unique. 🎥 Here’s how Start your page. Continue the legacy. 📖 👉 #StoryChain #NeverEndingStory

Milo's Never Ending Story, co-created by our amazing community has hit 67,000 pages! Did you know? You can animate your story page and make your page even more unique. 🎥 Here’s how Start your page. Continue the legacy. 📖 👉 #StoryChain #NeverEndingStory

StoryChain

23,098 views • 11 months ago

Playing with view transitions in the web

Playing with view transitions in the web

Marvin Schwaibold

27,574 views • 3 months ago

Page templates are *here* — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Page templates are here — plus a preview of page building mode. 👀 Now you can speed up static page creation by templatizing pages you build often, plus an update on progress towards page building mode. Learn more in the update post:

Webflow

33,811 views • 2 years ago

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

Wes Bos

149,029 views • 1 year ago

Good transitions make apps feel premium. → A collection of essential transitions for web apps. Just: • copy • paste • ship Simple. Smooth. Beautiful. Credits: Jakub Antalik

Good transitions make apps feel premium. → A collection of essential transitions for web apps. Just: • copy • paste • ship Simple. Smooth. Beautiful. Credits: Jakub Antalik

Kailash

252,253 views • 1 month ago

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

joshpuckett

102,712 views • 5 months ago

Introducing the new Lovable dashboard 🔥 The first step towards making Lovable feel more personal. Here’s what’s new: 1/ Meet the new "Home" One simple view that lets you easily create new projects. PS: Choose between different gradients to make it feel more like you. 2/ Simple navigation The new sidebar gives extra clarity and makes jumping between the most important pages easier than ever. 3/ Welcome global search (Command K) Quickly find what you're looking for from anywhere by clicking CMD K. PS: You can even ask Lovable to create a new project directly from that view. 4/ Introducing folders Start organizing your projects in folders. Lovable now grows with you. 5/ Star your projects Keep your favorite projects handy at the top. 6/ Discover and Templates Explore apps built by other Lovable users. Coming soon. Check it out and let me know what you think. Now available to all Lovable users.

Introducing the new Lovable dashboard 🔥 The first step towards making Lovable feel more personal. Here’s what’s new: 1/ Meet the new "Home" One simple view that lets you easily create new projects. PS: Choose between different gradients to make it feel more like you. 2/ Simple navigation The new sidebar gives extra clarity and makes jumping between the most important pages easier than ever. 3/ Welcome global search (Command K) Quickly find what you're looking for from anywhere by clicking CMD K. PS: You can even ask Lovable to create a new project directly from that view. 4/ Introducing folders Start organizing your projects in folders. Lovable now grows with you. 5/ Star your projects Keep your favorite projects handy at the top. 6/ Discover and Templates Explore apps built by other Lovable users. Coming soon. Check it out and let me know what you think. Now available to all Lovable users.

Felix Haas

15,870 views • 6 months ago

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

Devon Govett

120,824 views • 1 year ago

In Astro 5.7, every SVG is an Astro component! Import it, use it in your page and it will be inlined in the HTML. You can even pass it any SVG props. Learn more:

In Astro 5.7, every SVG is an Astro component! Import it, use it in your page and it will be inlined in the HTML. You can even pass it any SVG props. Learn more:

Astro

22,893 views • 1 year ago