Jquery на прокрутке уменьшить шкалу div

Question

Я пытаюсь создать анимацию, например, яблочные часы.https://www.apple.com/apple-watch-series-4/ для прокрутки видео в полном размере.

Они уменьшают масштабное значение с 1 до 0. Т.е. масштаб (1,1)

Я написал код ниже.Но scale перемещается от 0 до 1.

var docHeight = document.documentElement.offsetHeight;
    jQuery(window).scroll(function (event) {
        var scroll = jQuery(window).scrollTop() + 62;
        if(scroll >= jQuery('.image-text-effect').offset().top){

            console.log('docHeight'+docHeight);
            console.log('innerHeight'+window.innerHeight);
            console.log('scroll'+scroll);

            var scrolled = scroll / ( docHeight - window.innerHeight );

            transformValue = 'scale('+scrolled+', 1)';
            transformValue1 = 'scale(1, '+scrolled+')';

            document.getElementById('section-border-right').style.transform = transformValue;
            document.getElementById('section-border-left').style.transform = transformValue;
            document.getElementById('section-border-top').style.transform = transformValue1;
            document.getElementById('section-border-bottom').style.transform = transformValue1;
        }
    });

Может кто-нибудь, пожалуйста, помогите мне разобраться в этом.

Вот HTML-код, где я хочу изменить масштаб

<div class="section-borders-inside">
 <div class="section-border section-border-right" data-scale="x" id="section-border-right" style="transform: scale(0, 1);"></div>
 <div class="section-border section-border-left" data-scale="x" id="section-border-left" style="transform: scale(0, 1);"></div>
 <div class="section-border section-border-top" data-scale="top" id="section-border-top" style="transform: scale(1, 0);"></div>
 <div class="section-border section-border-bottom" data-scale="bottom" id="section-border-bottom" style="transform: scale(1, 0);"></div>
</div>