Изчистване на проблема с setInterval

Имам известни затруднения при стартирането на множество анимации в Safari без забавяне на браузъра. Моите анимации са гладки във всички други браузъри.

Не съм сигурен дали има нещо общо с моя скрипт:

var looping;

function loop()
{
    var scrollTop = $(window).scrollTop();
    if( scrollTop > 300 && scrollTop < 1001 )
    {
        looping = setInterval(function()
        {
            $('.page.active .strip').stop().animate(
            {
                'background-position': '-=100px'
            },1000,'linear');
        },1000);
    }
    else if( scrollTop < 301 || scrollTop > 1000 )
    {
    clearInterval(looping);
    $('.page.active .strip').stop();
    }
}

Това, което се опитвам да постигна, е да направя безкрайно въртящо се изображение.

Опитах и ​​двете следните неща, за да спре анимацията:

clearInterval(looping);
$('.page.active .strip').stop();

Което не работи. Както можете да видите по-горе, искам анимацията да се изпълнява само след като лентата е видима за потребителя.

В същото време пуснах тази анимация.

function loadLandingSlider()
{
    totalImg = $('.page.active #rotating-item-wrapper img').length;

    rotate = setInterval(
    function() 
    {
        loadImg();
    }, 3000);
}

function loadImg()
{
    $('.page.active .rotating-item').fadeOut(1000);
    $('.page.active #rot' + counter).fadeIn(1000);  

    if(counter == totalImg) counter = 1;
    else counter ++;
}

Това е само основна галерия с изчезване на изображения

Опитах да заменя скрипта с css3 анимации, но това го забави още повече

Оценявам всяка помощ!