Почему не срабатывает второе условие?

Question

Делаю анимацию на anime.js и я хочу получить эффект как при наведении так и при scroll.

При scroll вниз овал снизу должен появиться а при скоолле вверх пропасть это получается кроме второго условия - не пропадает...

Я знаю, догадываюсь что где то я накосячил с if...else

Как допилить условия ?

document.querySelector("#path").onmouseover = get;
document.querySelector("#path").onmouseout = out;

function out() {
  anime({
    targets: this,
    d: [{
      value: 'M0,0 10,0 10,3.4 Q5,3.6 0,3.4'
    }],
    easing: 'easeOutElastic',
    duration: 300,
    loop: false
  });
}

function get() {
  anime({
    targets: this,
    d: [{
      value: 'M0,0 10,0 10,3.4 Q5,5 0,3.4'
    }],
    easing: 'easeOutElastic',
    duration: 300,
    loop: false
  });
}
let y = document.body.scrollTop || document.documentElement.clientHeight;

window.onscroll = function() {
  if (y >= 100) {
    anime({
      targets: '#path',
      d: [{
        value: 'M0,0 10,0 10,3.4 Q5,5 0,3.4'
      }],
      easing: 'easeOutElastic',
      duration: 300,
      loop: false
    });
  }
  if (y < 100) {
    anime({
      targets: '#path',
      d: [{
        value: 'M0,0 10,0 10,3.4 Q5,3.6 0,3.4'
      }],
      easing: 'easeOutElastic',
      duration: 300,
      loop: false
    });
  }
}

body {
  margin: 0;
  height: 3000px;
  padding-top: 350px;
}

svg {
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg viewBox="0 0 10 5">
  <defs>
    <pattern id="pt" width="100%" height="100%">
        <image 
          href="https://w-dog.ru/wallpapers/10/18/461215311366431/devushka-more-pesok-veter-priroda.jpg"
          width="100%"  height="100%" preserveAspectRatio="none" x="0" y="0"/>      
    </pattern>
  </defs>
  <path id="path" d="M0,0 10,0 10,3.4 Q5,3.6 0,3.4" 
        fill="url(#pt)"/>
</svg>

Answer 1

В примере 2 ошибки,

не правильно определяется на сколько прокручен документ, я поменял на:
```
y = window.pageYOffset
```
эту операцию надо выполнять каждый раз, когда было изменено состояние прокрутки, а не единожды, как в вопросе, для этого я добавил:

document.querySelector("#path").onmouseover = get;
document.querySelector("#path").onmouseout = out;

function out() {
  anime({
    targets: this,
    d: [{
      value: 'M0,0 10,0 10,3.4 Q5,3.6 0,3.4'
    }],
    easing: 'easeOutElastic',
    duration: 300,
    loop: false
  });
}

function get() {
  anime({
    targets: this,
    d: [{
      value: 'M0,0 10,0 10,3.4 Q5,5 0,3.4'
    }],
    easing: 'easeOutElastic',
    duration: 300,
    loop: false
  });
}
let y = window.pageYOffset ;

window.onscroll = function() {
  y = window.pageYOffset ;
 // console.log(y)
  if (y >= 100) {
    anime({
      targets: '#path',
      d: [{
        value: 'M0,0 10,0 10,3.4 Q5,5 0,3.4'
      }],
      easing: 'easeOutElastic',
      duration: 300,
      loop: false
    });
  }
  if (y < 100) {
    anime({
      targets: '#path',
      d: [{
        value: 'M0,0 10,0 10,3.4 Q5,3.6 0,3.4'
      }],
      easing: 'easeOutElastic',
      duration: 300,
      loop: false
    });
  }
}

body {
  margin: 0;
  height: 3000px;
  padding-top: 350px;
}

svg {
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<svg viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pt" width="100%" height="100%">
        <image 
          href="https://w-dog.ru/wallpapers/10/18/461215311366431/devushka-more-pesok-veter-priroda.jpg"
          width="100%"  height="100%" preserveAspectRatio="none" x="0" y="0"/>      
    </pattern>
  </defs>
  <path id="path" d="M0,0 10,0 10,3.4 Q5,3.6 0,3.4" 
        fill="url(#pt)"/>
</svg>

БЛОГ НА HUSL

Почему не срабатывает второе условие?

Ответы (1 шт):