ScrollMagic自动切片湿纸巾

Question

我正在尝试使用scrollmagic擦除板条箱部分。一切都近乎完美，但是我需要按锚点（寻呼点）进行更改。

var dots = document.querySelectorAll('#verticalSection1-dots div');
var updateCount = false;

function  changeDotItems(index) {
    if(!updateCount){
        updateCount = true;
    }else{
        $('.dotItem').removeClass('active');
        $(dots[index]).addClass('active');
    }
}  


function changeDot(e,i) {

    var ratio = e.ratio * 10;
    if(ratio > 3.65 && ratio < 10){
        changeDotItems(i);
    }else if(ratio < 1 && i !== 2){
        changeDotItems(0)
    }
}
var wipes = document.querySelectorAll('.wipeItem');
    var totalDuration = 0;
    wipes.forEach(function (value,index) {
        totalDuration +=  document.getElementById(value.getAttribute('id')).offsetHeight;
    });

    totalDuration = totalDuration;
    var controller = new ScrollMagic.Controller();

    var wipeAnimation = new TimelineMax()
        .fromTo("div.wipeItem.item2", 1,{y:"100%"}, {y: "0%", ease: Linear.easeNone,onUpdate:changeDot, onUpdateParams:['{self}',1]})
        .fromTo("div.wipeItem.item3", 1,{y:"100%"}, {y: "0%", ease: Linear.easeNone,onUpdate:changeDot, onUpdateParams:['{self}',2]});



    var pinItemScence = new ScrollMagic.Scene({
        triggerElement : "#wipe",
        duration:totalDuration,
        triggerHook :"onLeave"
    })
        .setPin("#wipe")
        .setTween(wipeAnimation)
        .addIndicators()
        .addTo(controller).on('progress',function (e) {
            //console.log(e)
        });

我认为，我在某个地方犯了逻辑错误，但我找不到。

此处是codepen链接：https://codepen.io/anon/pen/gQoObm?editors=0010

预先感谢您的帮助。