{"id":4232,"date":"2024-10-22T11:42:53","date_gmt":"2024-10-22T16:42:53","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4232"},"modified":"2024-10-22T11:42:54","modified_gmt":"2024-10-22T16:42:54","slug":"view-transitions-staggering","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/view-transitions-staggering\/","title":{"rendered":"View Transitions Staggering"},"content":{"rendered":"\n

I love view transitions. When you’re using view transitions to move multiple items<\/em>, I think staggering them is cool effect and a reasonable ask for doing so succinctly. While I was playing with this recently I learned a lot and a number of different related tech and syntax came up, so I thought I’d document it. Blogging y’all, it’s cool. You should.<\/a><\/p>\n\n\n\n

Example<\/h2>\n\n\n\n

So let’s say we have a menu kinda thing that can open & close. It’s just an example, feel free to use your imagination to consider two states of any UI with multiple elements. Here’s ours:<\/p>\n\n\n\n

\n
\n
\"\"
Closed<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Open<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

View Transitions is a great way to handle animating this menu open. I won’t beat around the bush with a working example. Here’s that:<\/p>\n\n\n\n