Member Avatar for Azer_1

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
  • 180 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by gentlemedia

Recommended Answers

All 9 Replies

Member Avatar for rproffitt

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

Member Avatar for Azer_1

Thanks for attention. Then is my code OK?

Member Avatar for rproffitt

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?

Member Avatar for Azer_1

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.

Member Avatar for gentlemedia

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.

Member Avatar for Azer_1

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

Member Avatar for gentlemedia

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
Member Avatar for Azer_1

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.