Nicolas Hoizey

🖋 “HTML and CSS based View Transitions are coming”

While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷‍♂️).

#CSS #ViewTransitions

⚓️ https://nicolas-hoizey.com/articles/2023/05/19/html-and-css-based-view-transitions-are-coming/

HTML and CSS based View Transitions are coming

While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷‍♂️).

Nicolas Hoizey
May 19, 2023 at 6:20pmWeb
Show threadNicolas HoizeyMay 19, 2023
This was inspired by recent posts from @davatron5000 and @chriscoyier , and of course it requires a huge THANK YOU to @jaffathecake ! 🙏
Show threadBob MonsourMay 19, 2023
@nhoizey Wow! So I downloaded Chrome Canary for the first time because I had to try this out. It's going to be very cool for multi-page sites once this is widely supported. My imagination is running wild. Thanks for sharing this.
Show threadNicolas HoizeyMay 19, 2023

@bobmonsour sorry for the Canary download! 😅

But I'm glad you like this new features!

Show threadBob MonsourMay 19, 2023
@nhoizey Just added the view-transition meta tag to https://11tybundle.dev/ for anyone hitting it from Chrome Canary.
The 11ty Bundle

Your curated source for discovering how the community is using 11ty, a simple, flexible, open-source static site generator. With loads of resources: 1687 blog posts from 497 authors across 53 categories, 36 starter projects, and much more.

Show threadNicolas HoizeyMay 19, 2023
@bobmonsour nice! 👍