How to smooth out setInterval animation?

Question

A client asked for a rotator of customer logo's for their bootstrap3 website. The logo are not a consistent size and the rotator should rotate automatically in an infinite loop.

Here is the CodePen

The animation is not smooth. Particularly on FireFox. Is there a more efficient way to handle the animation?

HTML

<div id="clients_carousel" class="col-md-12 hidden-xs hidden-sm"> <ul id="scroller" class="clearfix"> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/01/keesler.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/wcd.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/viva.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/magma.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/safe.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/2ndimage.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/balboa1.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/smile.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/nfib.png" alt=""></li> <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/dental1-e1424199396391.png" alt=""></li> </ul> </div>

CSS

#clients_carousel { position: relative; margin: 0px auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; } #clients_carousel ul { position: absolute; list-style-type: none; top: 0px; left: 0px; height: 40px; margin: 0px; padding: 0px; width: 9999px; } #clients_carousel ul li { float: left; position: relative; margin: 0px; height: 40px; padding: 0px 15px; } #clients_carousel ul li img { height: 40px !important; width: auto !important; }

JS

setInterval(function() { if (!$('#clients_carousel ul').is(':animated')) { var fWidth = parseInt($('#clients_carousel ul li:first').outerWidth(true), 10); var lIndent = parseInt($('#clients_carousel ul').css("left"), 10); if (fWidth < Math.abs(lIndent)) { $('#clients_carousel ul li:last').after($('#clients_carousel ul li:first')); var newIndent = lIndent + fWidth; $('#clients_carousel ul').css('left', newIndent + 'px'); lIndent = newIndent; } $('#clients_carousel ul').animate({ left: lIndent - 5 }, 40, "linear"); } }, 41);

Ed Ballot · Accepted Answer · 2015-07-14 20:49:17Z

3

Animation looks best at 60 fps (frames per second). 60fps is an update every ~16.7ms.

With that in mind, you should use use 16 or 17 for your setInterval. You might also consider using requestAnimationFrame to drive the animation callback (there is a polyfill somewhere on github if you need that for legacy browser support).

answered Jul 14, 2015 at 20:49

Ed Ballot

3,5051 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jppower175 Over a year ago

Using the requestAnimationFrame works great for the bulk of the animation. However there is still a hiccup when popping the first item of the list and moving to the end. I think the DOM manipulation is to much to fit in the 16.7ms. Any suggestions?

Ed Ballot Over a year ago

That is a question unto itself. One thing that should help: add -webkit-transform: translateZ(0); (and its generic equivalent) into the #clients_carousel css rule. This moves that part of the dom into its own compositing layer so changes to it won't require re-layout of the rest of the page.

ODelibalta · Accepted Answer · 2015-07-14 20:38:26Z

I certainly did not look at all your code but just looked at javascript and changed the interval of the execution. In short, I tweaked the math and it seemed it helped. You can tweak more to fine tune it. Also, make sure you files are as small as possible for loading. Thats web dev 101 but I wanted to say it just in case.

setInterval(function() { if (!$('#clients_carousel ul').is(':animated')) { var fWidth = parseInt($('#clients_carousel ul li:first').outerWidth(true), 10); var lIndent = parseInt($('#clients_carousel ul').css("left"), 10); if (fWidth < Math.abs(lIndent)) { $('#clients_carousel ul li:last').after($('#clients_carousel ul li:first')); var newIndent = lIndent + fWidth; $('#clients_carousel ul').css('left', newIndent + 'px'); lIndent = newIndent; } $('#clients_carousel ul').animate({ left: lIndent - 2 }, 50, "linear"); } }, .001);

Collectives™ on Stack Overflow

How to smooth out setInterval animation?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related