SVG Linie beim Scrollen durch Website animieren

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

Das Problem beim animieren:

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.  

Mögliche Lösungen:

1. Lazy Loading von allen Bildern entfernen. Dafür das Bild markieren und in den Element Settings „Load” auf „eager” stellen.
2. Der SVG Linie eine feste Höhe geben. Das wird aber beim Thema responsive nicht ganz einfach. Setzt man overflow hidden auf den page wrapper, kann die Linie notfalls auch länger sein und wird eben abgeschnitten.
3. Meine Empfehlung: Bei allen Bildern eine Aspect Ratio nutzen. Auch der Padding bottom Trick genannt. Man legt ein Div Wrapper um das Bild und gibt diesem einen padding bottom in %. Das Bild setzt man dabei auf width 100% und height 100%;
4. Eine weitere Möglichkeiten um eine Linie während dem Scrollen auf der Website zu animieren, ist, z.B. eine Lottie Animation einzusetzen.

Der jQuery Code, den ich in diesem One-Pager zum animieren der Linie einsetze, habe ich auf CSS Tricks entdeckt.