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.
Azer_1 0 Newbie Poster
rproffitt 2,662 "Nothing to see here." Moderator
Just tried it and it seemed smooth to my. It's the office laptop with is the usual i7 16GB SSD thing.
Azer_1 0 Newbie Poster
Thanks for attention. Then is my code OK?
rproffitt 2,662 "Nothing to see here." Moderator
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?
Azer_1 0 Newbie Poster
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.
gentlemedia 803 Master Poster
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.
Azer_1 0 Newbie Poster
can you show me how to apply 2D (transform: translateX()) to my code if possible?
gentlemedia 803 Master Poster
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.
Azer_1 0 Newbie Poster
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
Please help me to choose which one to select? And which one is more efficent. Thanks to all.
gentlemedia 803 Master Poster
You can use 'timeline' in Chrome DevTools tools to record a page load and meaure & analyze stuff like paint, FPS and CPU. Compare between the new and the old slider.
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.