Блог

Изо всех сил пытаюсь заставить несколько SVG анимироваться при прокрутке. Я следил за расширением кода, и первая анимация работает нормально, а вторая — нет. Мне нужно иметь возможность запускать 4-5 из них на главной странице.

     var scrollMorph1  = new TimelineLite({paused:true})
    .to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0)
    .to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0)
    .to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0)
    .to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0)
    .to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0)

    $(window).scroll(function() {
        var scrolled = $(window).scrollTop();
        var diff = 50;

        var object1 = $('#header h1');
        var topOfRange1 = object1.offset().top   diff; 

        if (scrolled > topOfRange1 ) {
            scrollMorph1.play().timeScale(1);
            } else {scrollMorph1.reverse().timeScale(1);}
    }); 



    var scrollMorph2  = new TimelineLite({paused:true})
    .to("#clientsMask",1, {morphSVG:"#clientsMask2"},0)

    $(window).scroll(function() {
        var scrolled = $(window).scrollTop();
        var diff = 50;

        var object2 = $('#weare a');
        var topOfRange2 = object2.offset().top   diff; 

        if (scrolled > topOfRange2 ) {
            scrollMorph2.play().timeScale(1);
            } else {scrollMorph2.reverse().timeScale(1);}
    });
  

Код работает нормально. Был нацелен не на путь, а скорее на идентификатор SVG во втором. Необходимо указать путь.