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
Thanks in advance.
You do know that CPUs perform one task at a time, don’t you? and that other processes sometimes take precedence over the one that is running, so the one that is running has to pause for a bit? You have JavaScripts running and CSS animation. Your computer has other tasks running, too. Perfectly smooth isn’t always possible.
I would like to say that is everythink OK with my code. Or can i optimize it more? thanks for attention.
I’m not a JS expert, but I ran your code several times on my PC, which is fairly busy, and out of about 8 repetitions, the boxes only stalled twice for a fraction of a second. The other runs looked satisfactory to me. I would call it good.
You can wait a little longer and some JS wizards will arrive who can give expert opinions, if you wish.
EDIT:
My offsite backup utility just kicked in and the boxes tend to jerk just a little, but not enough to complain about at all. To me, the action still looks acceptable.
1 Like
Thank you very much.
You’re welcome.
Please remember that I am telling you about the behavior that I see, not about the code. If you have concerns about the JS, please stick around until the JS people arrive. We have some very accomplished JS programmers here who delight in sharing their opinions about JS techniques.
1 Like
Great thanks.)
The animation worked perfectly and smoothly. I am using Chrome 53 on a Win 7 machine.
I didn’t looked at the code though.
If you have a time please look over. Because when i run this code in Chrome first two boxes tend to jerk just a little. Ann my Chrome version is 53 too. Its everything is OK with Mozilla. Thanks for attention.
Well yes there was a slight jerk but I think its nothing to do with your incorrect code. Its default behaviour of JS or JQuery IMO. Perhaps you can try Velocity JS.
Yes perfectly fine in FF too.
The jerk is so negligible that I won’t or normal users won’t mind.
If CSS3 animation will work for you then try CSS3 because JS or JQ animations are not as smooth as that of CSS3 animations.
So if you are thinking that your code is wrong then I don’t think so.
Sorry I can’t offer js help either but I can see that your animation stutters occasionally although it is not too bad as most animations I see aren’t 100% perfect. The css version I made for your other thread however is much smoother as the animation is hardware accelerated and outside of whatever else is going on (although css animations are never perfect either).
I realise this was an exercise in JS but wondering if offloading some of the work to css would increase performance? Also rather than adjusting position I believe translateX is more performant but not sure if that applies to js manipulation also.
Also note that ids are unique and you can’t have html like you have shown and you should use classes when you need multiple use (although this has nothing to do with your problem as such).
Thanks to all who spended time, energy for this
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.
My old slider
Please help me to choose which one to select? And which one is more efficent. Thanks to all.
For me in Chrome the old slider seems smoother.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.