Wer kennt das nicht? Man hat den Webauftritt fertig designt und ist eigentlich zufrieden mit dem Ergebnis. Jetzt fehlt nur noch das gewisse Etwas an Animationen. Da muss noch ein wenig Bewegung in die Sache kommen, natürlich nicht zu viel, denn hier gilt: weniger ist mehr. Aber es wäre doch toll, wenn sich der Call-To-Action Button in der Hero-Section beim Laden der Seite schön unaufdringlich von unten etwas nach oben schieben würde. Oder die einzelnen Abschnitte der Seite könnten sich dezent einblenden, sobald sie am unteren Bildrand erscheinen.
Mit Page-Buildern wie Elementor ist das Ganze ziemlich unkompliziert und schnell erledigt. So einfach, dass man schon wieder aufpassen muss, nicht zu viele Animationen einzubauen. Nachdem man zwanzig Animationen eingebaut und mindestens siebzehn davon wieder gelöscht hat, wäre auch das erledigt. Speichern, noch kurz im Browser testen und… Oh, was ist denn das für ein Flackern? Da hat sich doch für eine Millisekunde etwas komisch bewegt. War das nicht kurz grün und dann orange? Seite neu laden. Ja, es ist wieder passiert. Was ist das? Nochmal neu laden. Mist, das geht zu schnell. Ich sehe es nicht richtig.
Google Chrome hat eine Zeitlupen-Einstellung
Ja, richtig gelesen. Chrome hat in den Entwickler-Tools – auch DevTools genannt – eine Zeitlupen-Funktion für Animationen. Die ist ziemlich versteckt, weshalb auch ich erst vor Kurzem darauf gestoßen bin. Hier eine kurze Schritt-für-Schritt-Anleitung, wie du sie findest und nutzen kannst (Lesemuffel können gerne weiter unten das Video anschauen).
- Öffne deine Seite oder eine Seite deiner Wahl
- Öffne die Entwickler-Tools, indem du
- Mit der rechten Maustaste auf deine Seite klickst und den untersten Menüpunkt “Untersuchen” auswählst.
- Oben im Menü auf Anzeige → Entwickler → Entwickler-Tools klickst.
- Bei den Entwickler-Tools klickst du in der obersten Leiste ganz rechts auf die drei vertikalen Punkte und wählst unter “Weitere Tools” den Unterpunkt “Animationen” aus.
- Nun sollte sich eine weitere Leiste mit den Animationen öffnen. Aktuell steht dort wahrscheinlich “Auf Animationen warten…”. Das Tool zeichnet erst ab dem Moment auf, ab dem es aktiviert ist. Du kannst jetzt also entweder die Seite nochmal neu laden oder die Interaktion mit dem Element vornehmen, welche dessen Animation auslöst (mit der Maus darüber fahren, klicken etc.).
- Du siehst, jetzt gibt es Aufzeichnungen. Diese kannst du mit der Scrollbar vor- oder zurückspielen.
- In der Leiste oben kannst du auch die Wiedergabegeschwindigkeit anpassen. Du hast die Auswahl aus 100%, 25% oder 10%.
- Falls du eine langsamere Wiedergabegeschwindigkeit gewählt hast und die Aktion, welche die Animation auslöst, nochmal ausführst, wird jetzt auch die Animation selbst im Browser verlangsamt angezeigt.
Du siehst, ein optimales Tool, um deine Animationen mal in Zeitlupe anzuschauen. Zudem hast du im Animationsfenster alle Elemente eingeblendet, die an der Animation beteiligt sind. Und du kannst beispielsweise die Animationsdauer verändern und verschiedene Tempi testen, ohne gleich wieder Elementor oder den Code-Editor öffnen zu müssen.
Und hier noch das Video dazu:
Über mich
