Annotated Source Code: Split Flap

The split flap is probably one of the more complicated custom elements released in HotFX so far, almost 300 lines of code excluding comments.

The length comes from three reflected and validated attributes, a complicated DOM, and quite a bit of style.

This element resembles the <hotfx-counter> custom element which has a MutationObserver, which responds to changes in light DOM, and an IntersectionObserver, which triggers the animation when the element comes into view.

The animation logic in the #animate() function is particularly novel because it chains JavaScript animations and DOM updates.