Get this horizontal mouse movement scroll to use translateX?


I have this code (script not made by me).

And for the mouse sensitive scroll it uses marginLeft. However I would like to modify this (if possible) to use translateX instead, because of the superior smoothness.

However, since beeing a JS noob (still), I don’t know how to do or if it is even possible without writing a whole new script.

I tried changing:

$th.css({marginLeft: -posX*wDiff});


$th.css({"transform": "translateX(" + -posX*wDiff + ")"});

But that didn’t do nothing.

Anyone want to help me?

Do you have a working example of the demo? There seems to be no html with that codepen.


Here is the demo, working and using marginLeft. codepen demo

You missed the px.

$th.css({"transform": "translateX(" + -posX*wDiff +"px)"});
1 Like

Thx. Always the small things:P

Just a follow-up question:

Do you know any way to further smoothen the animation? Because my “tiles” have background-images (200-500kb each) and even with translate3d i cant really get that buttersmooth scrolling that I want, tips?

EDIT: nevermind, translate3d vs translateX actually made quite some difference.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.