Rearrange / Animate CSS Grid Layouts with the View Transition API
source link: https://www.bram.us/2023/05/09/rearrange-animate-css-grid-layouts-with-the-view-transition-api/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Animate CSS Grid Layouts with the View Transition API – Bram.usSkip to content
About 5 years ago I found this neat library called animate-css-grid that allows you to use transitions in your CSS Grid. As new items get added or change size, they animate:
Today I revisited its flagship demo, switching it over to use the View Transition API.
Switching to View Transitions was a breeze:
- Set a unique
view-transition-nameon each element in the grid. - Wrap the DOM updates in a call to
document.startTransition. - Replace the default animation with some of the example CSS Jake provided in his massive View Transitions post.
If you take a close look at the reworked version, you’ll find some of the finer details – such as a tiny delay per transitioned element, or the way the elements grow – are missing. Nonetheless, I find the result already to be pretty amazing. Just a few lines of JS and CSS, and you have an animated grid layout 🙂
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK