Jump to content
Search Community

How to add moving line

Tijo test
Moderator Tag

Recommended Posts

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

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.
×
×
  • Create New...