CSS Animation Performance: Monitoring u. Optimierung

[Franko]

Hallo - FYI:
Wer seine CSS Animationen mal auf Performance testen will oder analysieren möchte warum man u.U. dabei unterhalb von 60fps fallen kann,
findet dazu ein schönes Tutorial hier:

https://www.youtube.com/watch?v=0Xg6r_MKGJ4

Man erhält einen kleinen Überblick über die Browser-Rendering Mechanismen
und wie man z.B. mit den Chrome Dev-Tools testen kann welche properties bei Animationen Auswirkungen auf die Framerate haben.

Dabei kann man sich zudem an dieser Liste orientieren:
https://csstriggers.com/

Nachtrag:

• Performance Monitoring mit Firefox
• Performance Optimierung über Hardware Acceleration (GPU) o. will-change property

[Franko]

Nachtrag:
Gary Simon (s.o.) hat ebenfalls ein schönes Tutorial zur "Intersection Observer API":

https://www.youtube.com/watch?v=_5Bu3JY-ZHc

Wer also eine Alternative zu wow.js o. wew.js sucht ...
In der Contao Erweiterung "heimseiten/contao-inviewport-bundle" wird dies z.B. genutzt.

[Franko]

Nachtrag für Firefox User bez. Performance Monitoring s.:
https://www.sitepoint.com/check-css-...ers-dev-tools/

[Franko]

FYI:
Möchte nur kurz hierzu noch LottieFiles zwecks Alternative erwähnen.

Letztlich handelt es sich um Vektor basierende Animationen die dann final in einer .json Datei abgebildet werden.
Zwangsläufig benötigt man dann den Web-Player zur Darstellung (Diese ist aber verlustfrei skalierbar).
Die Einbindung des Players in Contao kann wie üblich manuell erfolgen (.js) oder über die Erweiterung inspiredminds/contao-lottie-player.

Zur Erstellung der Animation könnte der eigene Online Editor heran gezogen werden.
Allerdings existieren dazu auch freie PlugIns zwecks Nutzung/Export für diverse Applikationen wie "Adobe After Effects", "Adobe Animate", "Sketch", "Inkscape" usw..

After Effects Nutzer z.B. kennen wahrscheinlich schon das originäre airbnb plugin "bodymovin".
Das aktuelle, eigene lottiefiles Plugin für AE bietet darüber hinaus weitere Möglichkeiten.

Eine weitere Möglichkeit, neben CSS oder Script Frameworks wie GSAP oder Three.js.

Carpe diem
Franko

[Franko]

Eine weitere Optimierung bez. CSS Animationen
ist die Nutzung der schnelleren GPU Rechenkapazität (Hardware Acceleration) oder der Einsatz des "will-change" properties:

Schöne Beiträge hierzu:

Everything You Need to Know About the CSS will-change Property (Sara Soueidan)
oder
https://www.sitepoint.com/introducti...ange-property/