SVG on Scroll Animation

SVG on Scroll Animation, με λίγες γραμμές Vanilla JavaScript.

let path = document.querySelector(".svg_container path");
let length = path.getTotalLength();

path.style.strokeDasharray = length + " " + length;
path.style.strokeDashoffset = length;

window.addEventListener("scroll", () => {
    let scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    let drawLenght = length * scrollPercentage;
    path.style.strokeDashoffset = length - drawLenght;
});

Και λίγο css

.svg_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}

svg {
    display: inline-block;
    height: 100%;
}

Τόσο απλά, το svg εμφανίζεται καθώς scrollάρουμε καθ’όλη την διάρκεια του scroll της σελίδας.

Σχετικό άρθρο με SVG Animation: SVG Drawing Animation με CSS.

Ο κώδικας του παραδείγματος είναι ανεβασμένος στο Github