After speaking with kip and BenWa from GFX, it was suggested that we use the updated `scrollTo()` API in <gaia-carousel> to ensure a smooth framerate when handling the "flick" animation. Relevant bugs: Bug 964097 - [meta] Implement CSSOM-View smooth scrolling spec Bug 945584 - Implement CSS scroll snapping

Diego: Please review. I've updated the <gaia-carousel> component to use .scrollTo() for setting the scrollLeft and scrollTop properties. I've also added the scroll-behavior: smooth; CSS property. kip: I've flagged you for feedback to see if you can take a look at this to see if there's anything else missing. Every call to .scrollTo() is coming from within a requestAnimationFrame() callback. The only thing I wasn't really sure about is if there's anything else I needed to do for the scroll-behavior: smooth; CSS property to go into effect. My initial tests seem to indicate that I'm getting a higher FPS with this patch, but I just want to be sure I'm not overlooking any other optimizations. Thanks again for all the great info yesterday!

(In reply to Justin D'Arcangelo [:justindarc] from comment #1) > Created attachment 8526919 [details] > pull-request (master) > > Diego: Please review. I've updated the <gaia-carousel> component to use > .scrollTo() for setting the scrollLeft and scrollTop properties. I've also > added the scroll-behavior: smooth; CSS property. > > kip: I've flagged you for feedback to see if you can take a look at this to > see if there's anything else missing. Every call to .scrollTo() is coming > from within a requestAnimationFrame() callback. The only thing I wasn't > really sure about is if there's anything else I needed to do for the > scroll-behavior: smooth; CSS property to go into effect. My initial tests > seem to indicate that I'm getting a higher FPS with this patch, but I just > want to be sure I'm not overlooking any other optimizations. Thanks again > for all the great info yesterday! The way you implemented would certainly eliminate the stutters; however, the motion will not react to touch gestures as naturally as it could and you could save more CPU cycles and battery. For a more optimized result, you would simply call .scrollTo() once only, at the beginning of the animation with the final position set as the target. It will animate asynchronously and automatically. Please note that the animation will take into consideration the fling gesture speed and may complete in a variable amount of time. The animation can also be cancelled by subsequent touch or drag events before it has a chance to complete. Be sure to call .scrollTo() again if the user releases their finger from the screen at the end of any interrupting touch events if you don't want it to rest part way between images. The duration and speed is dynamic, with some tuning provided by global preferences in Gecko: layout.css.scroll-behavior.spring-constant layout.css.scroll-behavior.damping-ratio I hope this helps!

Comment on attachment 8526919 [details] pull-request (master) The way you implemented would certainly eliminate the stutters; however, the motion will not react to touch gestures as naturally as it could and you could save more CPU cycles and battery. For a more optimized result, you would simply call .scrollTo() once only, at the beginning of the animation with the final position set as the target. It will animate asynchronously and automatically. Please note that the animation will take into consideration the fling gesture speed and may complete in a variable amount of time. The animation can also be cancelled by subsequent touch or drag events before it has a chance to complete. Be sure to call .scrollTo() again if the user releases their finger from the screen at the end of any interrupting touch events if you don't want it to rest part way between images. The duration and speed is dynamic, with some tuning provided by global preferences in Gecko: layout.css.scroll-behavior.spring-constant layout.css.scroll-behavior.damping-ratio IMHO, it is fine to use the smooth scroll as you have, but not optimal. I'd recommend trying the changes I suggested above and choosing the method that gives you the best results. I hope this helps!

Landed on master: https://github.com/gaia-components/gaia-carousel/commit/caee36ea6b9d4a2c341f7ed5a502ca87927db697