A month from now, the post on FLIP animations by @aerotwist.com will be 10 years old. aerotwist.com/blog/flip-yo...
Post
aerotwist.comFLIP Your AnimationsAnimations in your web app should run at 60fps. Not always easy to achieve that,and it really depends on what you're trying to do, but I'm here to help. With FLIP.
I was reminded of this when looking things up while writing www.bram.us/2025/01/08/v... In that post I fiddle with the keyframes of a `::view-transition-group` pseudo and roll my own FLIP keyframes based on the old and new positions.
bram.usView Transitions Snippets: Keeping track of the old and new positions of a transitioned elementBy calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
2 reposts3 likes
Thank you for sharing your examples and especially for opening those two issues! Looking forward to see them fixed as it is always disturbing if development tools show wrong values. vtbag.dev/tools/inspection-chamber/
Good news: The keyframes bug in WebKit was already fixed and is the fix is included in Safari Technology Preview and Safari 17.3 beta :) bugs.webkit.org/show_bug.cgi...
bugs.webkit.org285277 – [view-transitions] The keyframes for effects on ::view-transition-group() pseudos are wrong