Posts

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.
Post a Comment
Read more

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.
Post a Comment
Read more

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.
Post a Comment
Read more

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.
Post a Comment
Read more

CSS corner-shape scoop

Image
 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.
Post a Comment
Read more

Scaling up the size of SVG icons in a webpage

Image
 I scale up the size of my SVG icons on 'hover' by setting the 'font-size' rather than using a 'scale3d' 'transform'. I use 'ems' for the size of my SVG icons. I keep the SVG icona centred in the same place by using a minus 'translate' 'transform'. Here is an example:     .catNearBriefIntron:hover     {         font-size: 200%;         transform: translate(-25%, -25%);     } I translate by '-25%' rather than '-50%' because I only have to move the centre of the SVG. Using 'scale3d' is quicker as it can run on the GPU. But setting the 'font-size' looks better as the SVG is completely redrawn at the new size. Increasing the 'font-size' means the icon may take up more space and nearby elements may be reflowed. So I set a parent container's 'position' to be 'relative' and then give the icon a 'position' of 'absolute' The scaling using 'font-size' can lo...
Post a Comment
Read more

Wrong use of JavaScript 'replace' function

Image
 I sometimes forget that JavaScript's 'replace' function returns the changed value and does not change the string itself. I sometimes miss out the first line in code like this:       targetElement.className =           targetElement.className.               replace(/[ ]*vtSettingsRadioButton/g, ''); Here I am removing a CSS class from an HTML element.
Post a Comment
Read more