Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,369 subscribers

142,262 görüntüleme • 2 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Here's the @CodePen link people! 🤙 Could do something neat with the blueprint vibe. Would be rad if you could do 3D in ::view-transition or get an extra pseudoelement from somewhere 🤔 Had some fun ideas for it!

Mike Smedley profil fotoğrafı
Mike Smedley2 yıl önce

The demo is great but my god the tab bar 😂😂

🏴 uɒɹɥəɯ profil fotoğrafı
🏴 uɒɹɥəɯ2 yıl önce

FYI #cs_internship @maryam_davoudi @Ali_Sdg90

GrahamTheDev profil fotoğrafı
GrahamTheDev2 yıl önce

Love it, does focus get maintained if you activate the button via keyboard or would you need to do some JS magic? I am guessing it would behave like a refresh being a view transition? 🤷💗

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Nah - You don't need to do anything. View Transitions are two snapshots of the DOM state. Nothing changes unless you change it within the spot where you update the DOM 🤙 I'll snap a clip of it

ptr profil fotoğrafı
ptr2 yıl önce

@Apple @mozilla neat right?

Fredrik Tibbling profil fotoğrafı
Fredrik Tibbling2 yıl önce

Great stuff 🤩

Tyson Skakun profil fotoğrafı
Tyson Skakun2 yıl önce

Get out of town. Thats sick

trixster profil fotoğrafı
trixster2 yıl önce

good work. as a user does that do more good than harm?

Hruthik Reddy profil fotoğrafı
Hruthik Reddy2 yıl önce

oh my oh my what did I just see.

Benzer Videolar

dark side of the theme △🌈 – one set of CSS @​keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁
0:24

dark side of the theme △🌈 – one set of CSS @​keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁

jhey ʕ•ᴥ•ʔ

55,268 görüntüleme • 1 yıl önce

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,656 görüntüleme • 9 ay önce

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨
0:24

View Transitions with CSS linear() to create a light flicker effect on theme change 💡 [data-theme='light']::view-transition-group(root) { animation-timing-function: var(--flicker); } jus' set a custom timing function on the default animation 👨‍🍳 bonus: drag switch ✨

jhey ʕ•ᴥ•ʔ

113,381 görüntüleme • 10 ay önce

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,157 görüntüleme • 3 yıl önce

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇
0:38

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

79,987 görüntüleme • 1 yıl önce

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳
0:32

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

jhey ʕ•ᴥ•ʔ

13,147 görüntüleme • 2 ay önce

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 ʕ•ᴥ•ʔ

286,001 görüntüleme • 1 yıl önce

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,302 görüntüleme • 2 yıl önce

View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations. Also, we have some new View Transition DevTools in Firefox 147…
1:33

View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations. Also, we have some new View Transition DevTools in Firefox 147…

Firefox for Web Developers

15,580 görüntüleme • 7 ay önce

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:
0:28

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:

Bramus

23,414 görüntüleme • 11 ay önce

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,668 görüntüleme • 3 yıl önce

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

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,798 görüntüleme • 3 yıl önce

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @​keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @​property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇
0:44

Future CSS Tip! 📜 You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️ mark { animation-name: highlight; animation-timeline: view(); } @​keyframes highlight { to { --light: 1; }} mark span { background-position: calc((1 - var(--light)) * 110%) 0; transition: background 1s; } The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @​property. And that's what you want. You can then use that value to set the style on the highlights ( ). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙 Added bonuses: – Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick. – Highlight color is scoped inline via hue. – View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

257,631 görüntüleme • 2 yıl önce

Sorry if this one was hard to follow. Twitter video compression did wonders🫠 Here's a video that breaks things down reverse engineering the effect of those CSS scoped custom properties 🤙 Each step sets a uniform value to a property of the particles 🤓
0:33

Sorry if this one was hard to follow. Twitter video compression did wonders🫠 Here's a video that breaks things down reverse engineering the effect of those CSS scoped custom properties 🤙 Each step sets a uniform value to a property of the particles 🤓

jhey ʕ•ᴥ•ʔ

70,723 görüntüleme • 3 yıl önce

🤯 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,101 görüntüleme • 1 yıl önce

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it
0:51

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

Adam Argyle

469,587 görüntüleme • 3 yıl önce

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀
0:25

This CSS trick is fascinating ⭐️ By setting: [type=range] { overflow: hidden; } You can create a view timeline on the handle: ::-webkit-slider-thumb { view-timeline: --thumb inline; } And then you can use that to build all sorts of custom range sliders 🚀

jhey ʕ•ᴥ•ʔ

94,024 görüntüleme • 2 yıl önce

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,063 görüntüleme • 2 yıl önce

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.
0:40

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.

Addy Osmani

33,960 görüntüleme • 2 yıl önce