Webflow Trick-Kiste
Animate SVG lines (when in viewport)
Autor
Jonas Arleth
Blog Post
With just two attributes, you can animate any SVG with line paths and adjust the timing.
Instructions
With just two attributes, you can animate any SVG with line paths and adjust the timing. Especially easy to integrate in Webflow via an Embed field. I explain how in the video.
- Path Commander: https://thednp.github.io/svg-path-commander/convert.html
- SVG Compressor: https://jakearchibald.github.io/svgomg
The following JavaScript code is needed:
You need to apply the following 2 attributes to a DIV around the SVG:
svg=”animated”
svg-animation-time=”number in ms” (optional)