0

A lot of online games use animations of HTML elements as a core gameplay mechanics. For example, a solitaire game may have a DIV element or an IMG element for every card on the gameboard. Players drag and drop these cards across the board, and the game often shows animations that last a few seconds. An example of such animation is dealing cards, i.e. distributing them from the deck to their proper places on the gameboard at the beginning of the game. This is usually done 1) without user interaction, upon entering the website, and then 2) after user interaction, upon finishing one game and starting another.

These animations are longer than 500 ms, and so (as I understand) the elements, which finish their movement after that time, count towards CLS regardless of whether the user initiated the animation or not. Moreover, the card-dealing animation that greets the user on the website is entirely counted towards CLS. This might be solved by forcing the user to interact with the website before the initial animation, but it is a bad UX, as this is an extra unnecessary and potentially annoying click for the user. There is a lot to write about it, but for now, I’ll just state that showing a (not user-initiated) greeting animation is the best UX practice in this context and it is employed by the most popular games (also those using canvas).

The websites with games based on HTML elements are quite popular, and include Solitaire, Mahjong, Minesweeper etc. Some are at the top spots in the Google search results and have hundreds of thousands of users every month. I suspect that other, non-game-related sites may also employ useful movement animations of HTML elements which are appreciated by the users. Hence, I’ll ask in general:

  1. Do I understand correctly that such animations of HTML elements, despite being expected by the user, are misclassified by contemporary CLS measures as unexpected?
  2. Is the intention of the designers of the CLS measures to penalize this type of website behavior? I am especially asking in terms of SEO as I suspect CLS may be used as a factor by some ranking algorithms.
Amadeus
  • 11
  • 1

1 Answers1

0

It's hard to say exactly what's causing your issue without knowing how you've implemented your animations, but if you are animating or transitioning using the CSS transform property, then it shouldn't contribute to CLS because it doesn't trigger a re-layout of the page.

In general, this is a best practice for smooth animations, so I'd recommend it even if your CLS was fine.

See more details here: https://web.dev/optimize-cls/#animations

Philip Walton
  • 29,693
  • 16
  • 60
  • 84
  • Think of jQuery.animate changing the top and left CSS properties of an IMG with display:block and position:absolute. This does not trigger a re-layout of the page, as such elements just “hover” above the content. Nevertheless, it still counts towards CLS. So, from this answer I gather that current CLS measures are implemented incorrectly and the only workaround is to rewrite the game engine of an otherwise perfect product. Is that correct? I.e. the answer to my first question is “YES”. What is the answer to the second question? Is this intentional or will CLS improve in the future? – Amadeus Feb 09 '22 at 09:51
  • Animating top and left for a position absolute element still does trigger layout because it cannot be done on the compositor thread (unlike transform). See https://csstriggers.com. – Philip Walton Feb 09 '22 at 17:20