{"id":768,"date":"2024-02-09T10:40:52","date_gmt":"2024-02-09T16:40:52","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=768"},"modified":"2024-02-09T10:40:52","modified_gmt":"2024-02-09T16:40:52","slug":"velvette","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/velvette\/","title":{"rendered":"Velvette"},"content":{"rendered":"\n

While I was over on Codrops reading Adam’s article about Scroll-Driven animation<\/a>, I also read Noam Rosenthal’s article about View Transitions<\/a>. Noam is also at Google and working on the View Transitions API<\/a>, so knows it pretty intimately, and found enough gaps that a library around it was warranted. That’s what Velvette<\/a> is: a library around making certain things easier with the View Transitions API. <\/p>\n\n\n\n

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<\/code>. 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<\/code> of the element to the view-transition-name<\/code>, so you’re having to craft unique identifiers anyway. Why not just toss a UUID on them or something? <\/p>\n\n\n\n

I was able to get it working, but ultimately didn’t find it very useful.<\/p>\n\n\n\n\n\n\n\n