Animate display: none (and more!) with View Transitions

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=Qwgc_pJ2OOw


Duration: 0:55
8,428 views
478

Write any CSS you want in the contenteditable -pre- and some JavaScript will tell the browser to start a view transition (take a before screenshot), apply the written styles to the page, then take an after screenshot and transition between the two states (whatever they are!).

Codepen demo → https://goo.gle/3Ps3hZx
View Transitions guide → https://goo.gle/3CqDHMB

GUI Snippets → https://goo.gle/GUIsnippets
GUI Challenges → https://goo.gle/GUIchallenges

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIsnippets



Other Videos By Chrome for Developers


2023-07-20What’s new in DevTools: Network, Console, Wasm (Chrome 113-115)
2023-07-13Thinking on ways to solve a MORPHING BUTTON
2023-07-12New in Chrome 115: scroll-driven animations, Fenced Frames, Topics API, and more!
2023-07-07Popover API - New in Chrome 114
2023-07-07RAM technique: Repeat, auto and minmax
2023-06-29localStorage and sessionStorage - DevTools Tips
2023-06-23Use text-wrap: Balance to improve text layouts - New in Chrome 114
2023-06-23Understand passkeys in 4 minutes
2023-06-23Layout techniques: The deconstructed pancake
2023-06-15ChromeOS Policy API
2023-06-14Animate display: none (and more!) with View Transitions
2023-05-30New in Chrome 114: text-wrap:balance, CHIPS, Popover API and more!
2023-05-25Setting up Workspaces - DevTools Tips
2023-05-18Long-term support (LTS)
2023-05-17Thinking on ways to solve color palettes
2023-05-11What's new in Web in less than 1 minute
2023-05-10Top web things at Google I/O '23
2023-05-10What's new in ChromeOS in less than 1 minute
2023-05-10Optical Character Recognition demo
2023-05-10What's new in Web - American Sign Language
2023-05-10What’s new in ChromeOS | Google I/O 2023 - American Sign Language


Tags:
Chrome
Developers
Google
Web
gui challenges
css
css tutorial
how to use css
what is css
intro to css
introduction to css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
chrome latest
chrome updates
Adam Argyle
GUI Snippets