Heute zeige ich dir eine Möglichkeit, wie du den Pfad einer gezeichnete SVG Linie während des Scrollens durch die Website „malen” bzw. animieren kannst. Über mein Patreon Account habe ich den kompletten One-Pager Layout Prozess in Webflow als Video dokumentiert: https://www.patreon.com/posts/74222598 . Außerdem habe ich diese einfachen Scroll-Animationen, eingesetzt: https://youtu.be/H-NTi_dz1tE
Webflow fügt automatisch Lazy Loading zu jedem Bild hinzu. Darauf sollte man an sich auch nicht verzichten, nur kann man dadurch nicht im Voraus die Höhe der Seite wissen, da alle Bilder sozusagen erstmal keine Höhe haben. Will man dann die Linie flexibel in der Höhe halten (height:100%), falls mehr Bilder zum Layout hinzugefügt werden, merkt man beim Scrollen jedes mal ein Ruckeln, sobald eine neues Bild lazy geladen wird und die Linie dadurch etwas mehr gestreckt wird.
Der jQuery Code, den ich in diesem One-Pager zum animieren der Linie einsetze, habe ich auf CSS Tricks entdeckt.