Неожиданное поведение анимированных элементов

Question

Вот Codepen5 моей анимации.Как видите, что-то не так с «вводом» анимации последнего элемента в массив элементов.

Почти тот же код прекрасно работал с четырьмя элементами - Codepen4 .Проблемы возникли после того, как я добавил еще один элемент в меню и следующий код для реорганизации расширенных элементов на экранах размером менее 1300 пикселей;

if (winsize < 1600) {
    if (i === 0) {
        $(this.items[i]).css('transform', `translate(${ winsize/2 - 1.5*grow}px, 170px)`)
    }
    if(i === this.items.length - 1) {
        $(this.items[i]).css('transform', `translate(${ -1*(winsize/2 - 1.5*grow)}px, 170px)`)
    }
}

(строки 43 - 51)

Также внесены измененияв строке 31: const quarter = winsize / 4; до

const quarter = winsize / 5;

Буду признателен за любые идеи о том, что происходит не так.

Answer 1

Я думаю, что это глючит, когда вы меняете положение путем перевода после запуска анимации.Так что .. лучше изменить значения topPos и ​​leftPos до , используя функцию TweenMax.to.

Вместо этого

        //move blue and purple to the second row
            if (winsize < 1600) {
                if (i === 0) {
                    $(this.items[i]).css('transform', `translate(${ winsize/2 - 1.5*grow}px, 170px)`)
                }
                if(i === this.items.length - 1) {

                $(this.items[i]).css('transform', `translate(${ -1*(winsize/2 - 1.5*grow)}px, 170px)`)
                }
            }
        }

Изменить topPos и ​​leftPos до TweenMax.to

           //move blue and purple to the second row
            if (winsize < 1600) {
                if(i === 0) {
                  topPos = topPos + 170;
                  rightPos = rightPos - (winsize/2 - 1.5*grow);
                }
                if(i === this.items.length - 1) {
                  topPos = topPos + 170;
                  rightPos = rightPos + (winsize/2 - 1.5*grow)
                }
            }