inspiration Archives - id23 Webdesign

Schlagwortarchiv für: inspiration

SVG Artista – SVG Zeichnungsanimationen erstellen

25. August 2019/0 Kommentare/in CSS, Web/von id23

Screenshot von svgartista.net

Vor Kurzem habe ich hier im Ratgeber Animista vorgestellt, eine Plattform mit einer großen Sammlung vorgefertigter CSS Animationen. Animista ist ein Projekt von Ana Travas aus Kroatien, und seit einigen Tagen gibt es ein weiteres nützliches Tool von Ana Travas – SVG Artista. Damit lassen sich die Strich- und Fülleigenschaften von SVG-Grafiken mit einfachem CSS-Code animieren.

SVG Artista ist keine aufwendige SVG Animations-App oder JS-Bibliothek, worüber sich fortgeschrittene Bewegungsanimationen erzeugen lassen. Es können lediglich Zeichnungsanimationen erstellt werden. Also das Zeichnen von Linien oder das Füllen von Flächen sowie das Ein- und Ausblenden von Elementen. Laut Beschreibung sollte es problemlos mit Pfad-, Linien-, Polylinien-, Rechteck-, Kreis-, Ellipsen- und Polygonelementen funktionieren. SVG-Verläufe können jedoch nicht animiert werden.

Ein kleines Beispiel:

See the Pen
SVG Cat – CSS Stroke Animation by Sergej Skrjanec (@iamlark)
on CodePen.

Wie funktioniert SVG Artista?

Über die Buttons „Open SVG“ oder „Paste Markup“ lädt man entweder seine SVG-Grafik hoch oder fügt direkt einen SVG-Code ein. Anschließend lassen sich über die Einstellungsleiste am linken Rand verschiedene Voreinstellungen für die Füll- oder Strichanimationen auswählen und zuweisen. Unter anderem kann eine eigene CSS Klasse festgelegt werden, die jedem Element in deiner SVG-Grafik zugewiesen und für die Erzeugung der CSS Animation verwendet wird. Außerdem lassen sich auch die Hintergrundfarbe und der Animationstyp (Animation oder Transition) festlegen.

Die Idee dazu so ein Tool zu entwickeln ist daraus entstanden, dass viele Besucher von Animista gefragt haben, wie die Animista-Splash-Screen-Animation erstellt wurde. Ursprünglich sollte es auch als ein Teil von Animista veröffentlicht werden, es stellte sich jedoch während der Umsetzung heraus, dass es sinnvoller wäre, ein eigenes Projekt zu starten.

Wer seinen SVG-Grafiken automatisiert, ohne großen Aufwand, etwas Pep verleihen möchte, sollte sich SVG Artista mal ansehen. Die konfigurierbaren Zeichnungsanimationen sind eine unaufdringliche und schöne Möglichkeit einer Website etwas Leben einzuhauchen. Der Download des CSS-Codes steht unter der MIT Lizenz und ist kostenlos für private und kommerzielle Projekte verwendbar.

Hier geht’s weiter zu SVG Artista.

Animista – Vorgefertigte CSS Animationen

19. August 2019/1 Kommentar/in CSS, Web/von id23

Screenshot Animista - CSS Animations on demand

Screenshot von animista.net

Die Zeiten von Adobe Flash und komplett animierten Webseiten, die mit einer gefühlt endlosen Ladezeit die Geduld ihrer Besucher strapaziert haben, sind glücklicherweise lange vorbei. Auch heute werden Seiten natürlich noch animiert – allerdings meistens zurückhaltender als noch in den Anfangszeiten des Internets und anstatt auf Adobe Flash setzt man heute z. B. auf CSS3. Damit lassen sich schlichte, aber auch aufwendige Animationen recht einfach umsetzen. Noch einfacher ist es natürlich, wenn man dabei auf vorgefertigte CSS Animationen zurückgreifen kann, die man nur noch in sein eigenes Webprojekt einbinden muss.

Animista ist eine solche Sammlung mit vorgefertigten CSS Animationen. Über die Navigation ist die Sammlung unterteilt in verschiedene Bereiche, z. B. „Entrances“ (Eingangsanimationen), „Exits“ (Ausgangsanimationen) oder „Background“ (Hintergrundanimationen). Jede Animation ist in verschiedenen Varianten vorkonfiguriert verfügbar, kann aber auch beliebig angepasst werden. Über eine Einstellungsbox am linken Rand lässt sich u. a. die Verzögerung, die Wiederholung, die Richtung oder auch die Dauer der gewählten Animation verändern. Über den Replay-Button rechts oben lässt sich die Animation beliebig wiederholen, um die Auswirkung der Einstellungen zu testen.
Wenn eine passende Animation gefunden wurde, kann diese entweder zu einer Favoritenliste hinzugefügt werden oder man lässt sich direkt den CSS Code generieren, der dann nur noch kopiert und im eigenen Webprojekt eingefügt werden muss.

Entstanden ist Animista als kleines Nebenprojekt von Ana Travas aus Kroatien. Ursprünglich wollte sie ihre verwendeten CSS Animationen einfach nur sinnvoll und zugänglich organisieren, damit sie diese auch in anderen Projekten wiederverwenden kann. Mit der Zeit hat sich aus der Sammlung eine Art Spielplatz entwickelt, auf dem die Auswirkung verschiedener Optionen, wie z. B. die Beschleunigung, eine Verzögerung oder die Dauer auf die Animation getestet werden konnte.

Wer also auf der Suche nach passenden Animationen für seine Website ist oder wer einfach mal ausprobieren möchte, was man mit CSS alles animieren kann, sollte mal bei Animista vorbeischauen. Der Download der vorgefertigten und generierten CSS Animationen ist kostenlos für private und kommerzielle Projekte und steht unter der FreeBSD-Lizenz.

Hier geht’s weiter zu Animista.