Hi all, I have made simple slide that slides block from the left to the right. I used requestAnimationFrame for repated tasks. It works. But one problem is that when blocks are moving sometimes freeze and i saw that sliding is not smooth. Where i made mistake in my code? below is slider.
Slider
Any help greatly appreciated. Thanks in advance.

Just tried it and it seemed smooth to my. It's the office laptop with is the usual i7 16GB SSD thing.

Thanks for attention. Then is my code OK?

There are views about what correct code is. Is it OTB (one true brace) or other? The last time I looked there are 10 accepted (or more) code styles. There are also standards for variable naming and more. In this instance I did not review code as I can't guess which standards to apply. Does that make sense?

I know that there is a little problem with my code, due to I used there closure. I am looking for another optimized ways. One say I would like to say that it is ok with Mozilla.

I do see a slight hick-up in the animation too. It is slight, because there's nothing else that could influence the animation (like a design as a background).
Why not animating with CSS transform2D (transform: translateX()) instead of the left property? CSS transforms use their own rendering layer and therefore smaller paint times which results in better FPS.

can you show me how to apply 2D (transform: translateX()) to my code if possible?

Sorry, no can do. My JS skills are very limited so I would use CSS keyframes or if it has to be JS based animations to cover older browsers as well (or if I need more animation power), then I resort to GSAP.

I have changed my code a little bit. I applied call function there, and I removed closure style function. So my new slider is below.
new slider

My old slider

old slider

Please help me to choose which one to select? And which one is more efficent. Thanks to all.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.