CSS Animation Performance: Monitoring u. Optimierung
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:
"Intersection Observer API" Infos
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.
LottieFiles: Alternative für komplexe, skalierbare Animationen
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
Performance Optimierung über Hardware Acceleration (GPU) o. will-change property
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/
