ScrollMagic салфетки для авто - PullRequest
Новая
       10

ScrollMagic салфетки для авто

0 голосов
/ 27 ноября 2018

Я пытаюсь стереть секцию ящика с помощью 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)
        });

Я думаю, я где-то делаю логическую ошибку, но не могу найти.

Здесь ссылка на код: https://codepen.io/anon/pen/gQoObm?editors=0010

Заранее благодарю за помощь.

...