Cassie Evans hat eine großartige Einführung in Bewegungsanimationen (motion paths). Das bedeutet, ein Element entlang eines Pfades animieren zu können. Nicht nur hoch/runter/links/rechts, sondern egal welchen kurvigen/wackeligen/seltsamen Pfad Sie wollen.
Es ist ein interessantes Thema, da im Laufe der Zeit so viele verschiedene Technologien dabei helfen. SMIL, JavaScript-gestützte Animationsbibliotheken, native JavaScript-APIs und sogar CSS über offset-path und ähnliche. Ich finde offset-path lustig – es wurde von motion-path zu diesem Namen geändert, da man nicht technisch gesehen Bewegung auf ein Element anwenden *muss*, das man auf diese Weise auf einem Pfad platziert.
Es gibt keinen klaren Gewinner. Ich bin (vielleicht offensichtlich) ein Fan davon, Dinge wie diese, wann immer möglich, in CSS zu tun, aber die Browserunterstützung ist im Wesentlichen auf Chrome beschränkt. Außerdem fühlen sich SVG-Pfadwerte in CSS wegen der einheitlichen Zahlen immer ein wenig unangenehm an. SMIL fühlt sich wie eine praktisch tote Technologie an, aber zumindest ist man dann im SVG-Land und die Pfade machen in diesem Kontext Sinn. Wenn die Browserunterstützung entscheidend ist, muss man eine Bibliothek verwenden.
Ich denke, in Bewegungs-Pfaden steckt noch unerschlossenes, cooles Designpotenzial. Es ist nicht nur für landende Raumschiffe, sondern kann auch für praktische Dinge wie die Art und Weise, wie ein Modal auf einer Seite erscheint, verwendet werden.
Hat das schon mal jemand von diesen versucht zu machen
Sehr nützlich und interessant. Danke für das Teilen dieses großartigen Artikels
Hast du schon mal eins von diesen gemacht