How to add moving line

[Tijo]

Hi

How to add a moving line while scroll page to a html page? (PFA) Example url https://bitesizeinc.com/home

 

 

Thanks

 

[jsco]

I would use scrollmagic or sth similar to get the current scrollheight and combine that with the drawsvg plugin

 

so the line is an svg path that you drew beforehand and then you just fill it.

 

Alternatively you can also use this guide to animate the line yourself.

[Tijo]

Thanks,

but they are done this in different way.(moving the svg image to (-)top while scroll the page) See the codepen

using : transform: matrix(1, 0, 0, 1, 0, -1845);

See the Pen RwNBJxW by tijosfx (@tijosfx) on CodePen

 

How to increase the transform: matrix(1, 0, 0, 1, 0, -1845);  value(in red) while page scroll?

 

Thanks

[jsco]

const value = window.scrollY * x

 

you can get x by checking what the transform value is at the top of the page

 

transform: matrix(1, 0, 0, 1, 0, {value});

[ZachSaucier]

Hey Tijo and welcome to the GreenSock forums. 

 

There are several other threads here on the forums that I recommending giving a look:

 

[ZachSaucier]

5 hours ago, Tijo said:

How to increase the transform: matrix(1, 0, 0, 1, 0, -1845);  value(in red) while page scroll?

That's done simply by using something like gsap.to(yourElem, {y: 3000}); that is then affecting by changing it's .progress() on scroll. Alternatively it could be done inside of the scroll function just saying gsap.to(yourElem, {y: scrollTop}); or something similar.

 

Actually quite a clever technique that's great for the limited use case that they have (i.e. the line doesn't stays on the same vertical position on the page).