Wenn eine Anforderung lautet „wenn sichtbar“, sollte Ihr Gehirn sofort an IntersectionObserver denken. Genau das macht Zach hier, um eine Animation zu starten, wenn sie in den Ansichtsbereich gescrollt wird.
Außer dieser Animation ist es eine SVG SMIL-Animation: eine <animate>-Situation. SMIL-Animationen können einige ziemlich coole Dinge tun, wie zum Beispiel beginnen, wenn eine andere Animation endet, was CSS nicht so sehr hilft. Es stellt sich heraus, dass SMIL auch eine JavaScript-API hat, sodass es möglich ist, die Animation auf diese Weise nach Bedarf zu starten und gleichzeitig prefers-reduced-motion zu berücksichtigen.
Schauen Sie sich auch das an
.querySelectorAll(`:scope [begin="indefinite"]`);Diese :scope-Sache ist neu für mich.
Ist SMIL nicht mehr tot/sterbend? Laut diesem CSS-Tricks-Artikel von 2015 war es im Sterben, da die Unterstützung in WebKit nachließ und damals von IE/Edge kaum unterstützt wurde. Ist das immer noch der Fall? Offensichtlich hat sich seitdem viel für Edge geändert.
Es war eine Zeit lang sogar noch schlimmer, da Chrome angedeutet hat, es tatsächlich herauszureißen. Aber ich glaube nicht, dass das mehr der Fall ist (obwohl ich nichts zu zitieren habe) und jetzt hat Edge es wegen Chromium, also vielleicht bleibt es einfach.