Search

Velvette

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.

Need front-end development training?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

Leave a Reply

Your email address will not be published. Required fields are marked *