Posts

Showing posts from September, 2026

When view transitions clash

Image
 I sometimes check if other 'view transitions' are running before starting a 'view transition'. I check the property:     'document.activeViewTransition'  Otherwise this error appears in Chrome console:     'Uncaught (in promise) AbortError: Transition was skipped' I often use a 'promise' to clear up after the 'view transition':     transition =         document.startViewTransition(...);     transition.finished.then(finishVT); However, sometimes I want the second 'view transition' to actually run so I have to make the first 'view transition' not run at all. In the end, I added a check for active 'view transitions' to all of my 'view transitions'.  I don't like seeing an error in the browser's console. Also if 'view transition' clash then the promise may not run and the CSS classes triggering the 'view transitions' may not be removed from the HTML elements.

Combining CSS animations

Image
 Combining animations into one keyframe makes the animations perform better. I had an animation using 'scale3d' on a parent element and an animation using 'rotate3d' on a child. The performance was bad but improved when I put the parent's 'scale3d' in the child's keyframe.

Large angle for rotate transform

Image
 I mistakenly put a large angle in a 'rotate3d' transform and noticed the animation looked nice. A nice animation has a 1080 degree rotation and a scale transform from zero to 1 and opacity going from 0 to 1.

view transition makes screen flash

Image
 One of my 'view transitions' sometimes made the screen flash. I fixed this by setting 'animation-fill-mode' to 'both'. One of my normal CSS animation might also have had this problem. In general, I tend to put 'both' at the end of all my CSS 'animation' settings values. At first I thought the flashes were happening because I am changing 'display' values to hide and show part of the page. Adding and removing HTML elements seems to be better. Also I thought the flashes might be because I put 'view transition's around the start and end of a game, where a lot of changes are made to the page.  Maybe I should have kept the 'view transition' simpler. There is a good article about this at:   'piccalil.li/blog/     why-are-my-view-transitions-blinking/' The 'piccalil.li' site has some nice articles.