Animate an SVG Line Path While Scrolling Through Your Website
Today I'll show you a way to “paint” or animate the path of a drawn SVG line while scrolling through the website. Through my Patreon account, I documented the entire one-pager layout process in Webflow as a video: https://www.patreon.com/posts/74222598 . I've also used these simple scrolling animations: https://youtu.be/H-NTi_dz1tE
The problem with animating:
Webflow automatically adds lazy loading to every image. You shouldn't do without this in itself, it just doesn't allow you to know the height of the page in advance, as all images have no height, so to speak. If you then want to keep the line flexible in height (height: 100%) if more images are added to the layout, you notice a stutter every time you scroll as soon as a new image is loaded lazily and the line is stretched a bit more as a result.
Possible solutions:
- Remove lazy loading from all images. To do this, mark the image and set “Load” to “eager” in the element settings.
- Give the SVG line a fixed height. However, this won't be easy when it comes to responsive. If you put Overflow Hidden on the page wrapper, the line can be longer if necessary and will just be cut off.
- My recommendation: Use an aspect ratio for all images. Also known as the padding bottom trick. You put a div wrapper around the image and give it a padding bottom in%. The image is set to width 100% and height 100%;
- Another way to animate a line while scrolling on the website is to use a Lottie animation, for example.
I have the jQuery code that I use in this one-pager to animate the line on CSS Tricks discovered.
