Unexpected behaviour of animated elements

Question

Here is Codepen5 of my animation. As you can see there is something wrong with "entering" animation of the last element in array of items.

Almost the same code worked great with four elements - Codepen4 . Problems occurred after I've added one more item to menu and following code to reorganize expanded items on screens smaller than 1300px;

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)`)
    }
}

(lines 43 - 51)

Also made a change in line 31: const quarter = winsize / 4; to

const quarter = winsize / 5;

Will appreciate any ideas about what is going wrong.

Answer 1

I think it glitches when you change position by translate after starting animation. So.. better be changing topPos and leftPos value before using TweenMax.to function.

Instead of this

        //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)`)
                }
            }
        }

Change topPos and leftPos before 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)
                }
            }