This took longer than expected. Pretty cool that it works.

Post featured in video: https://tapbots.social/@mark/114617305665385240

Sneak preview of my talk “Supercharge Web UX with View Transitions” which I’ll be giving at #WebExpo in Prague tomorrow.

(Demo by the wonderful Maxi Ferreira – https://live-transitions.pages.dev/)

Web Animations Today and Tomorrow, by @bramus (@developers):

https://www.youtube.com/watch?v=UcXWY057YuQ

#Development #Techniques
Smoothly animating a ‘border-radius’ · Two approaches using CSS View Transitions https://ilo.im/163xin

_____
#ModernCSS #ViewTransitions #Animation #WebDev #Frontend #CSS

“View Transitions Break Incremental Rendering” by @eeeps

https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/

> Instead of showing users that this thing is the same as that thing, we’ve told them, perhaps with extra motion/panache, that even though these the two things might seem the same, they are in fact distinct. It’s like shaking your head “no” while telling someone “yes”.

#ViewTransitions #WebPerf

️ https://nicolas-hoizey.com/links/2025/05/07/view-transitions-break-incremental-rendering/

Using View Transitions in Next.js, by @jackabox:

https://jackwhiting.co.uk/posts/using-view-transitions-in-next-js

#Development #Guides
Must-know Interop features 2025 · A learning guide for the next couple of months https://ilo.im/1631b4

_____
#Browser #Interoperability #AnchorPositioning #ViewTransitions #WebVitals #WebPerf #WebDev #Frontend #CSS #JavaScript

The Bare Minimum You Need to Enable View Transitions on Your Website, by @amitmerchant.bsky.social:

https://www.amitmerchant.com/bare-minimum-view-transitions/

View Transitions Applied: Dealing With the Snapshot Containing Block, by @bramus (@bramusblog@x.com):

https://www.bram.us/2025/03/04/view-transitions-snapshot-containing-block/

Toe Dipping Into View Transitions, by @geoff (@csstricks):

https://css-tricks.com/toe-dipping-into-view-transitions/

View Transitions Applied: Smoothly animating a `border-radius`

https://www.bram.us/2025/03/11/view-transitions-border-radius/

I played around with #viewtransitions and #mathml yesterday, and made this example of how to animate solving an equation. It was pretty straight forward to get to work, but I wish I had some control over the transitions. Now the elements move in a straight line, it would be cool of i could make them follow an arc.

https://codepen.io/mariusgundersen/pen/EaxvjmQ

View transitions now have their own category on @frontenddogma:

https://frontenddogma.com/topics/view-transitions/

(Testing if notes on some new categories and tags could be helpful.)

#Development #Approaches
Building websites with LLMS · (L)ots of (L)ittle ht(M)l page(S) is a game changer https://ilo.im/162myf

_____
#ViewTransitions #Navigation #Filter #Webpage #Website #ProgressiveEnhancement #WebDev #Frontend #HTML #CSS

Improve accessibility by reducing motion of all kinds: View Transitions, CSS Transitions, CSS Animations, and Picture elements — all without rewriting styles or content.

Examples use an existing client website, showing that you can do the same in ongoing work. Don't wait for your next project to get a fresh start.. do it today!

https://chrisruppel.com/blog/modernizing-with-web-platform-reduced-motion/

Hey #CSS friends. Do we expect View Transitions to bork `background-filter` rules? Pending issue? Known workaround?

Asking for a friend.

#Development #Techniques
Keeping interactivity during a view transition · How to bypass the ::view-transition overlay clicks https://ilo.im/1623et

_____
#Interactivity #Animations #Transitions #Webpage #ViewTransitions #WebDev #Frontend #CSS #JavaScript

#Development #Techniques
6 CSS snippets to know in 2025 · “AI is not going to give you this CSS.” https://ilo.im/161x4n

_____
#ModernCSS #Layers #Animation #ViewTransitions #CustomProperties #ProgressiveEnhancement #WebDev #Frontend #CSS