Loading video...

Video Failed to Load

Go Home

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

argyleink's profile picture

Adam Argyle

57,294 subscribers

30,398 views • 3 years ago •via X (Twitter)

Science & TechnologyEducationArts#CSS#view
LIVE

Anya Rossi• Live Now

Private livecam show

10 Comments

Adam Argyle's profile picture
Adam Argyle3 years ago

new page scales += fades in old page quickly scales += fades out that's it. and there's way more customization you can do, this is basic!

🍊 KIRUPA's profile picture
🍊 KIRUPA3 years ago

Really cool. Is this for multi-page navigation? 🔥

Adam Argyle's profile picture
Adam Argyle3 years ago

yep!

Dave Geddes's profile picture
Dave Geddes3 years ago

this is going to be super cool

Alex Casillas —アレックス's profile picture
Alex Casillas —アレックス3 years ago

WOW 🤩 This is really cool ❤️

Luky - A$AP Luky's profile picture
Luky - A$AP Luky3 years ago

Damn! Looking stellar! I need to check this out with care!

Craig Webb's profile picture
Craig Webb3 years ago

Thank you Adam for all you do

real007's profile picture
real0073 years ago

How come it's taking 3.4s for the view to change when the user clicks on some things?

Adam Argyle's profile picture
Adam Argyle3 years ago

@MrH26750794 They're still working on things

César Gómez's profile picture
César Gómez3 years ago

@SaveToNotion #thread #css #animation #viewtransitionsapi

Related Videos

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯
0:29

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Adam Argyle

456,937 views • 3 years 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 →
1:24

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 • 7 months ago

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀
0:20

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,262 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
3:51

🤯 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,041 views • 1 year ago

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯
0:29

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

98,000 views • 2 years ago

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

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

Devon Govett

120,824 views • 1 year ago

View Transitions with CSS linear() to create a light flicker effect 💡
0:35

View Transitions with CSS linear() to create a light flicker effect 💡

jhey ʕ•ᴥ•ʔ

271,095 views • 1 year ago

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks
0:21

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

Adam Argyle

94,868 views • 3 years ago

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!
0:27

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,554 views • 2 years ago

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)
0:39

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,884 views • 7 months ago

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.
0:38

View Transitions just got simpler with Next.js 16.2. <𝙻𝚒𝚗𝚔> now has a 𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚃𝚢𝚙𝚎𝚜 prop. Tag your navigation with a type, and <𝚅𝚒𝚎𝚠𝚃𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗> picks the right animation.

Aurora Scharff

66,986 views • 3 months ago

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI
0:29

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

Jecelyn Yeen 🐟

13,261 views • 1 year ago

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇
0:28

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

Danny Moerkerke

38,803 views • 2 years ago

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle
0:20

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 views • 2 years ago

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:
1:10

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:

Miguel Ángel Durán

33,893 views • 1 year ago

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅
0:22

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 views • 1 year ago

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.
0:25

iOS Photos App Style Transitions Using SwiftUI NOTES: 1. The transition is not an overlay but a full-screen cover. 2. The paging is done using Page Tab View, not ScrollView.

Kavsoft

13,654 views • 4 months ago

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨
0:54

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨

Lázaro Nixon

10,406 views • 1 year ago

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇
0:38

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,088 views • 2 years ago

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,169 views • 1 year ago