[sergeantpepper]

Всем доброго времени!

Задача: Есть svg-геометрические фигуры, которые имеют равномерное вращение по часовой (скорость V1). При скролле вверх или вниз они должны ускорять свое вращение (скорость V2). Главным критерием является плавность и неторможение эффекта, иначе в нем теряется смысл.

Вот собранный стенд:
http://proudly.ru/febotelecom/#bl-services

Проблема сейчас в том, что анимация по советам была сделана через requestAnimationFrame, то есть девайс сам решает когда ему удобно перерисовать анимацию, но но мобайл устройствах при свайпе по-видимости мощи не хватает, и анимация вместо ускорения, наоборот, подвисает. Есть ли какие-то рецепты от опытных профессоров js анимаций?

Вот код:

var $services = $('#bl-services');
			$services.data('currRot', 0);
			var rotationV1 = 20;
			var rotationV2 = 100;
			var rotationTid = false;

			function servicesRotationCycle() {
				var currTs = Date.now();
				var dt = (currTs - $services.data('startTs')) / 1000;
				var rot = $services.data('startRot') + $services.data('speed') * dt;

				// debug
				//console.log('speed:', $services.data('speed'), 'rotation:', $services.data('startRot'), rot);

				$services.data('currRot', rot);

				$('#figure1').rotate({animateTo: Math.round(rot)});
				$('#figure2').rotate({animateTo: Math.round(rot)});
				$('#figure4').rotate({animateTo: Math.round(rot)});
				requestAnimationFrame(servicesRotationCycle);
			}

			function servicesRotationRegisterPoint(speed) {
				$services.data({
					'startTs': Date.now(),
					'startRot': $services.data('currRot'),
					'speed': speed,
				});
			}

			scrollCallbacks.push(function() {
				if (rotationTid) {
					clearTimeout(rotationTid);
				} else {
					servicesRotationRegisterPoint(rotationV2);					
				}
				rotationTid = setTimeout(function() {
					servicesRotationRegisterPoint(rotationV1);
					rotationTid = false;
				}, 50);
			});

			setTimeout(function() {
				servicesRotationRegisterPoint(rotationV1);
				requestAnimationFrame(servicesRotationCycle);
			}, 100);

Да, еще: используется Jquery.rotate (https://jqueryrotate.com/)