Menu

Post image 1
Post image 2
1 / 2
0

Chris’ Corner: View Transitions

CodePen·Chris Coyier·3 days ago
#aC7sVTqP
#blog#view#transitions#element#focus#ring
Reading 0:00
15s threshold

I’ve had View Transitions on the mind a little bit after experimenting with using them to move the focus ring around the page . I found that pretty satisfying, except the part where I was binding events to the tab key myself and keeping track of “focusable” elements. I know better, as that kind of thing is always best left to the browser. I was just checking whether it was possible to animate that focus style from place to place, since it wasn’t really “the same” element (and arguably not an element at all). It is totally possible. But then I’m glad Kilian Valkhof chimed in with his CSS-only floating focus with anchor positioning , which pulls it off without needing any JavaScript at all. I guess I still proved it can be done with View Transitions, but certainly Kilian’s demo is much cleaner. Jealous! I should have thought of that. In my own last demo, I noticed something about the CSS styles I was playing with to control the animations.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More