0

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.

3
Contributors
9
Replies
54
Views
10 Months
Discussion Span
Last Post by gentlemedia
1

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

0

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?

0

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.

0

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.

0

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

0

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.

Edited by gentlemedia

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.