Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tijo

How to add moving line

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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});

Link to comment
Share on other sites

Hey Tijo and welcome to the GreenSock forums. 

 

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

 

Link to comment
Share on other sites

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

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.
×