Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 09 Feb 2024 16:40:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 Velvette https://frontendmasters.com/blog/velvette/ https://frontendmasters.com/blog/velvette/#respond Fri, 09 Feb 2024 16:40:52 +0000 https://frontendmasters.com/blog/?p=768 While I was over on Codrops reading Adam’s article about Scroll-Driven animation, I also read Noam Rosenthal’s article about View Transitions. Noam is also at Google and working on the View Transitions API, so knows it pretty intimately, and found enough gaps that a library around it was warranted. That’s what Velvette is: a library around making certain things easier with the View Transitions API.

The #1 thing I wanted to try was “generate unique view-transition-names”. If you want a whole bunch of elements to all transition, every single one of them needs to have a unique view-transition-name. This is annoying verging on untenable in CSS, so the usual approach is using inline styles in the HTML. Unfortunately, the best Velvette can do is map the id of the element to the view-transition-name, so you’re having to craft unique identifiers anyway. Why not just toss a UUID on them or something?

I was able to get it working, but ultimately didn’t find it very useful.

]]> https://frontendmasters.com/blog/velvette/feed/ 0 768