Animacja scrollowania svg path

Question

Cześć!,

Uczę się javascripta i zrobiłem animację, która moim zdaniem jest fajna i ładna, lecz chciałbym dodać do niej jeszcze 2 rzeczy ale niestety nie wiem jak to zrobić.
Mianowicie pierwszą rzeczą jest to żeby pomiędzy tymi liniami był biały kolor a na zewnątrz był kolor czarny. Nie wiem czy muszę dodać do tego jakiś path po środku czy mogę jakoś ułożyć diva w taki sposób by był idealnie dopasowany.
Efekt który chciałbym uzyskać (na tym zdjęciu nie widać tych niebieskich lin tak dokładnie):

2 rzeczą którą nie wiem jak zrobić jest to by animacja była wykonywana dopiero wtedy gdy użytkownik widzi to, a nie wcześniej i gdy nie widzi również by stała na efekcie końcowym. Również chciałbym to lekko przyspieszyć bo nie da się przeskrolować do końca tak by animacja była zrobiona.
HTML:
 

 <section style="height: 150vh; background-color: black;">
            <div id="svg-container2">
              <svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
                <path id="my-path-2" class="path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
              </svg>
            </div>  
            <svg viewBox="0 0 1440 320">
              <path id="my-path" class="path-" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
            </svg>
          </section>

CSS:
 

svg {
    width: 100%;
    height: 30%;
    z-index: -1;
}

path {
    stroke: #0099ff;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill: none;
}

JS:

const path1 = document.querySelector("#my-path");
const pathLength1 = path1.getTotalLength();
path1.style.strokeDasharray = pathLength1;
path1.style.strokeDashoffset = pathLength1;

const path2 = document.querySelector("#my-path-2");
const pathLength2 = path2.getTotalLength();
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;

window.addEventListener("scroll", () => {
    const scrollTop = window.pageYOffset;
    const scrollHeight = document.body.scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / scrollHeight;

    const drawLength1 = pathLength1 * scrollFraction;
    path1.style.strokeDashoffset = pathLength1 - drawLength1;

    let drawLength2 = pathLength2 * scrollFraction;
    let offset2 = pathLength2 - drawLength2;
    if (scrollFraction === 1) {
      offset2 = pathLength2 - 1;
    }
    path2.style.strokeDasharray = pathLength2;
    path2.style.strokeDashoffset = offset2;

    if (drawLength2 <= 0) {
      path2.style.strokeDasharray = pathLength2;
      path2.style.strokeDashoffset = pathLength2;
    }
});

Z góry dziękuje za pomoc <3!

Comments

Sprawdź, małe zmiany w Twoim kodzie, może będzie pomocne w dalszych "eksperymentach" z kodem. 

 

Sprawdź też w kwestii

jak zrobić jest to by animacja była wykonywana dopiero wtedy gdy użytkownik widzi

Intersection Observer API: [ 1 ] [ 2 ] [ 3 ]

 

---

Będę kombinował chociaż już próbowałem użyć Intersection Observer API,
ale dziękuje za podpowiedź i optymalizacje mojego kodu.
A czy masz jakąś podpowiedź jeśli chodzi o zrobienie białego koloru pomiędzy?

---

Jak sam napisałeś

dodać do tego jakiś path po środku

też bym był za taką opcją.

<section style="height: 150vh;">
  <svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
    <path id="my-path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
  </svg>

  <!-- TU WSTAWIŁBYM KOD -->

  <svg viewBox="0 0 1440 320">
    <path id="my-path-1" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
  </svg>
</section>

 

---

Tak wiem próbowałem to robić tylko nie za bardzo wiem jak idealnie wygenerować taki path po środku

---

A sprawdź to: on-line.

Korzystałem z aplikacji: on-line.