JavaScript tips

 I add a 'vt' prefix to the names of my 'view transitions' This makes it easier to search for a 'view transition' name in the code. I found using a 'view transition' name such as 'settings' brings up lots of other matches with elements and CSS class names. The ' vtbag.dev ' website has lots of tips about CSS 'view transitions'.

 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 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.

 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.

 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.

 I had fun using 'corner-shape: scoop' to 'carve out' the corners of boxes with round corners. In fact, I give a random value between '-0.5' and '-1.5' to the 'superellipse' function. Nicely, 'scoop' has no effect if the corners are not rounded.