Webflow Trick-Kiste
SVG Linien animieren (wenn im Viewport)
Autor
Jonas Arleth
Blog Post
Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen.
Anleitung
Mit nur zwei Attributen kannst du jedes SVG mit Line Paths animieren und das Timing anpassen. Besonders einfach in Webflow über ein Embed Field zu integrieren. Wie erkläre ich dir im Video.
- Path Commander: https://thednp.github.io/svg-path-commander/convert.html
- SVG Compressor: https://jakearchibald.github.io/svgomg
Folgender JavaScript Code wird benötigt:
Folgende 2 Attribute musst du auf ein DIV um das SVG anwenden:
svg=”animated”
svg-animation-time=”zahl in ms” (optional)