Horizontal Scroll End Marker Slow

[FredMano]

 

Hello ! 

 

I implemented scrolltrigger on my project page, but the end marker at the end of the scroll is coming up really slowly. Do you have any idea why would this happen ? I think it's because of the div's height but I can't change it otherwise it won't be proper.

 

https://portfolio-tau-five-47.vercel.app/gtavm.html

 

Thanks in advance,

Best regards

 

[Cassie]

Hello! Welcome to the forums.

 

It's very hard to debug live sites without seeing the code. Could you either put together a minimal demo that reproduces the issue or post a code snippet? 

I can't guarantee a code snippet will allow us to nail down the issue but it's definitely better than just a live site and no code.

Thanks so much! Chat soon.

[FredMano]

Is it possible to send you the github repo by specifying which files are used for the page where the problem is ?

 

It's made with Vite so you'll juste have to npm i and npm run dev 

 

I tried to do a Codepen but there's too many files linked together to make the website Work... I'm really sorry

 

Thanks you 

[Cassie]

Ah yeah, sorry I should have specified that codesandbox would be the way to go for this kind of thing.

We prefer demos on codesandbox or codepen as it encourages folks to really cut the code down to the essentials, but I'm happy to look at a github repo if it's a minimal example.

 

let me know!

 

[FredMano]

I tried again to make a simple demo on these tools but it won't work properly I'm sorry..

 

Here's the github repo : https://github.com/Soliman-Halaby/portfoliov2

 

The files that have an impact on the page are project.css (style/project.css) - project.js (scripts/project.js) and the page in question is gtavm.html

 

Thank you and sorry again,

 

[Cassie]

From taking a peak at the code - this is probably your issue. 
 

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    markers: true,
    trigger: ".projectDisplayContainer",
    pin: true,
    start: "top 110",
    end: "bottom 0",
    scrub: 1,
    end: () =>
      "+=" + projectDisplayContainer.offsetWidth * (sections.length - 1),
    ease: "power2.easeOut", <------ take this out
  },
});

For future reference this is why it's super helpful to make a minimal demo. All I needed to see was the GSAP tween and the container that was being moved!

[FredMano]

I tried to remove it, still not working, any idea why? I think that you went on the file horizontalscroll.js, not the project.js one

 

Oh I understand, I'll do it next time, I'm sorry

[Cassie]

You've got the same thing in that file.
 

gsap.to(slides, {
  xPercent: -100 * (slides.length - 1),
  ease: "none",
  scrollTrigger: {
    markers: true,
    trigger: ".projectDisplayRow",
    scroller: ".projectDisplayContainer",
    pin: true,
    start: "top top",
    pinSpacing: false,
    scrub: 1,
    // snap: {
    //   snapTo: 1 / (slides.length - 1),
    //   inertia: false,
    //   duration: { min: 0.1, max: 0.1 },
    // },
    end: () => "+=" + projectSection.offsetWidth * (slides.length - 1),
    ease: "power2.easeOut", <--- remove this
  },
});

 

[FredMano]

I removed it and pushed on github and deployed so you can see but the issue is still present  

 

[Cassie]

Can you recreate it using this demo?

See the Pen ExbJZjw by GreenSock (@GreenSock) on CodePen

[FredMano]

That's what I did in the first place using the vertical - horizontal demo of GSAP but my website is specific because we scroll inside a container which is inside another, and It didn't work...

 

[Cassie]

Can you add the container and the relevant markup to this demo?

Don't worry about the framework side of things - just the markup, relevant styling and the GSAP code

[Cassie]

Sorry I know this can be frustrating but it really helps to try and isolate the issue. The repo you provided has a lot of files and code that isn't relevant to the issue

[FredMano]

I implemented the demo to my project and deployed / push in github, the page is a little broken because I removed the scrolled but we don't have the issue of the end marker anymore.

 

When I add the scroller back, the end marker is broken again but the container doesnt go anywhere for no reasons 😂 

[Cassie]

It sounds like maybe you're doing smooth scrolling too? Is that why you have everything wrapped in a container? I'm not really sure what the difference is between the demo I linked and your code? It's the same as far as I can see - just using 'sections' instead of 'slides'

Not really sure how else to help without a minimal demo really. Sorry.

 

[FredMano]

I tried again a minimal demo but still nothing is implemented as it should be... I will try to find a solution sorry for disturbing you this whole time !

 

Thank you  

[Cassie]

No worries, happy to help. Another good way to debug is to make a new branch in your repo and remove anything that could be causing the issue bit by bit until it works.

 

I'd start with any third party libraries, especially if you have smooth scrolling in there.

[FredMano]

I removed the smooth scrolling library, I'm just using GSAP. But I noticed that when I play with the height of elements (project.css :: .projectDisplay section) this works but the scroll is doing a weird thing. But I dont have the marked coming slowly anymore..

 

I deployed so you can see

 

[Cassie]

I'm afraid we really can't help you anymore without a minimal demo and more information.

We don't need to see all the styling/files/dependancies. Just strip it down to the bare minimum necessary to recreate the issue. Please feel free to use the demo I posted above as a starting point.

Sorry Fred - good luck getting this solved, please pop back when you have something we can take a look at.