Jump to content


Animate SVG Path segment while scroll

Recommended Posts



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) {
  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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.