Animate SVG Path segment while scroll

[Kaos1337 1 Likes (Newbie)]

Hi,

 

I have a text Logo SVG containing HTML Paths.
when the user scrolls down (> 10 px) the paths of the Logo will be hidden except two paths (.path-d, .path-m).
the second path will animate next to the first one. This work and happens correctly.

When the User scrolls up to the top of the page the position of the second path should be animated back to the initial position.
This doesnt work for any reason. I dont get it.

 

const logo = document.querySelector('.logo');
const logoSvg = document.querySelector('#logo');
const paths = logoSvg.querySelectorAll('path');
const pathM = document.querySelector('.path-m');
const tl = gsap.timeline();
const filterPaths = Array.from(paths).filter(path => !path.classList.contains('path-d') && !path.classList.contains('path-m'));
// e.target is the event from scrolling container
if (e.target.scrollTop >= 10) {
  console.log('here');
  tl.to(logo, { duration: .2, left: '2%' })
    .to(filterPaths, { duration: .1, opacity: 0 })
    .to(pathM, { duration: .4, x: '-75' });
} else {
  console.log('and here');
  tl.to(pathM, { duration: .4, x: '0' });
}

I tried it now with timeline and simple 'gsap.to(...)' but both with the same result.
When the User scrolls to top, the second Path (.path-m) moves a millisecond to the right and goes back to the position where it have to be when the user scrolls down. That doesnt makes sense to me.
In HTML the property which ist on the Path is 'matrix(1,0,0,1,-75,0)' which is definitely wrong.

What do I forget?

What do I wrong?

Thanks in Advance.

[Kaos1337 1 Likes (Newbie)]

I changed the animation from "scroll" event listener to request animation frame.
Now all works as expected.