Ускорение анимации вращения элементов при скролле

http://proudly.ru/febotelecom/#bl-services Есть блок с геометрическими фигурами, они вращаются. Задача сделать ускорение вращения при скроллинге вверх или вниз. В целом, в примере это уже работает, но ощущается "тяжесть" анимации + глюки на apple устройствах.

  1. Сейчас вращение реализовано через setInterval и модификацию свойства transform rotate, соответственно при скролле это значение также меняется.
    jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     '-o-transform': 'rotate(' + degrees + 'deg)',
                     'transform' : 'rotate('+ degrees +'deg)',
                     'zoom' : 1});
        return $(this);
    };
    
    var rotation = 0;
    var rotationLock = false;
    var rotationTid;
    setInterval(function() {
        if (!rotationLock || !__isMobile) {
            rotation += 0.5;
            $('#figure1').rotate(rotation);
            $('#figure2').rotate(rotation);
            $('#figure3').rotate(rotation);
        }
    }, 50);
    scrollCallbacks.push(function() {
        rotation += 1;
        $('#figure1').rotate(rotation);
        $('#figure2').rotate(rotation);
        $('#figure3').rotate(rotation);
        rotationLock = true;
        clearTimeout(rotationTid);
        rotationTid = setTimeout(function() {
            rotationLock = false;
        }, 100);
    });
  1. Также была попытка реализовать это через css анимацию, а затем при скролле менять animation-duration, но эта попытка вышла более глючной.
    animation-name: rotation180;
    animation-duration: $speed;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    @keyframes rotation180 { to { transform: rotate(180deg); }}

Подскажите, есть ли у кого-то реальный опыт в таких интерактивных анимациях? Очень хочется всё оптимизировать до ощущения невероятности)


Ответы (1 шт):

Автор решения: Sergei Kirjanov

Попробуйте requestAnimationFrame, там fps адаптируется под устройство.

И не прибавлять константу, а опираться на текущее время (от какого-то события): rot = f(t)

→ Ссылка