Two rows Horizontal Scroll mouse click interaction issue inside ScrollSmoother

[akal]

Hello,

I thought my 2 rows horizontal scroll slider was working well, but there is a weird issue, could you please have a look to this pen ?
The scroll slider itself looks working well, but once we start using mouse click (left or right) on the first row elements, there is a strange "jump" behavior.

Please first scroll down then try to click multiple time (only into the first row elements) in order to be able to reproduce the issue.

Outside the scrollsmoother, no issue anymore. What did I missed ? Any ideas ?

Thanks

akal

See the Pen yLRMbbW by akaaal (@akaaal) on CodePen

[Rodrigo]

Hi,

 

Why you have those <a> tags in the codepen demo? Those are pretty much useless there. Also if you want to trigger some specific code when clicking one of the cards an <a> tag might not be what you need. Once you remove the links everything seems to work as expected.

 

Happy Tweening!

[akal]

Hi Rodrigo thx for fast reply.
I realized I maybe didn't provide enought explanations: this codepen demo demonstrate a post loop where each cards (spl-post) are posts of the loop, so I want the <a href="something"> link to the related post. I first create the hscroll animation without using the <a> tags, then when I implement them, I discover the issue... So I need to use them, not in order to trigger specific code, but just doing a simple link ^^

Edit : I've just add css :

.hscroll a {
    display: block;
    width: 100%;
    height: 100%;
}

which look to be the solution of my issue

[Rodrigo]

Well I don't see the issue then. If you click a link then it'll take the user to a different page, right? So what could be the problem with your GSAP implementation since you'll be landing in a different page?

 

But I see that you found a solution for it which is great! Also thanks for sharing it with the community! 🥳

 

Happy Tweening!

[akal]

Thanks ^^