GSAP TimelineLite заканчивает временную шкалу вместо паузы

Question

Я использую GSAP TimelineLite для слайдера. Я заметил, что слайдер немного портится при переходе с одной вкладки на другую.

Я решил эту проблему с помощью Page Visibility API, Если страница не активна, временная шкала приостанавливается, и как только страница снова становится активной, временная шкала возобновляется.

// page visibility    
document.addEventListener('visibilitychange', handleVisibilityChange);

function handleVisibilityChange() {
    if (document.hidden) {
        tl.pause();
    }
    else {
        tl.resume();
    }
}

Это работает нормально, однако временная шкала все еще может немного "сломаться", если вы переключите вкладку между ползунками. Мне было интересно, если есть что-то похожее на jQuery finish функция вместо использования pause,

Я пытался использовать addPause функция, которая по умолчанию приостанавливает временную шкалу в конце временной шкалы. Пока не получается заставить его работать.

function handleVisibilityChange() {
    if (document.hidden) {
        tl.addPause();
    }
    else {
        tl.resume();
    }
}

Я также пытался использовать onComplete Функция в конструкторе и последний элемент на временной шкале вместо приостановки временной шкалы, когда страница не активна. Но кажется, что после переключения на другую вкладку ничего не запускается, ни один из журналов консоли не отображается.

Конструктор:

tl = new TimelineLite({
    onComplete: function() {
        if (document.hidden) {
            console.log('timeline: pause');
            tl.pause();
        }
    }
});

Конец временной шкалы:

tl
    .to(activeSliderText, 0.5, { opacity: 0 })
    .fromTo(activeSlider, 1, { x: 0 }, { x: animateTo, ease: Power1.easeInOut }, '-=0.25')
    .fromTo(newSlider, 0.9, { x: animateFrom }, { x: 0, ease: Power1.easeInOut }, '-=1')
    .fromTo(newSliderText, 0.5, { opacity: 0 }, { opacity: 1, onComplete: endOfTimeline }, '-=0.25');

var endOfTimeline = function() {
    console.log('end of timeline');
    if (document.hidden) {
        console.log('timeline: pause');
        tl.pause();
    }
}