анимация при скролле?

Подскажите почему робот начинает свое движение позже, получается я уже достаточно много проскролил и только потом он начинает движение, а хотелось бы чтобы когда скролишь его видно было всегда. И при адаптиве линии ломаются и налазят на карточки, резайз не помогает. Подскажите пожалуйста, где я ошибаюсь. Тут код полностью: https://jsfiddle.net/xn9k7vhd/57/ . Сюда html и css не смог добавить, слишком много символов и вопрос не публикуется

// Сгенерировать <path> 
const generatePath = (breakPoints) => {
    let d = ''
    for (let line in breakPoints) {
        d += `M ${breakPoints[line].from.x} ${breakPoints[line].from.y} ${breakPoints[line].to.x} ${breakPoints[line].to.y}` + ' '
    }

    return d
}

// Получить расстояние от крайней точки блока до стороны страницы
const getRect = (selector, side) => {
    return selector.getBoundingClientRect()[side]
}

// Отрисовать svg элемент
const drawPath = () => {
    let svg = document.querySelector('#robot-path');
    let path = svg.querySelector('path');
    let svgCont = document.querySelector('.super-sector');
    let [contTop, contBottom] = [svgCont.getBoundingClientRect().top, svgCont.getBoundingClientRect().bottom];
    let [contLeft, contRight] = [svgCont.getBoundingClientRect().left, svgCont.getBoundingClientRect().right];
    let contHeight = contBottom - contTop;
    let contWidth = contRight - contLeft;

    svg.setAttribute("viewBox", `0 0 ${contWidth} ${contHeight}`)
    let cards = document.querySelectorAll('.steps__slide.slide-steps')
    const pathBreakPoints = {
        0: {
            from: {
                x: contWidth / 1.1,
                y: 0
            },
            to: {
                x: 0,
                y: 0
            }
        },
        1: {
            from: {
                x: 0,
                y: 0
            },
            to: {
                x: 0,
                y: (getRect(cards[0], 'bottom') - getRect(cards[0], 'top'))
            }
        },
        2: {
            from: {
                x: 0,
                y: (getRect(cards[0], 'bottom') - getRect(cards[0], 'top'))
            },
            to: {
                x: contWidth,
                y: (getRect(cards[0], 'bottom') - getRect(cards[0], 'top'))
            }
        },
        3: {
            from: {
                x: contWidth,
                y: (getRect(cards[0], 'bottom') - getRect(cards[0], 'top'))
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) + 0
            }
        },
        4: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) + 0
            }
        },
        5: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) + 0
            }
        },
        6: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) + 0
            }
        },
        7: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) + 0
            }
        },
        8: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) + 0
            }
        },
        ///
        9: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) + 0
            }
        },
        10: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) + 0
            }
        },
        11: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) + 0
            }
        },
        12: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) + 0
            }
        },
        13: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) + 0
            }
        },
        14: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) + 0
            }
        },
        15: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) + 0
            }
        },
        16: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) + 0
            }
        },
        17: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) + 0
            }
        },
        18: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) + 0
            }
        },
        19: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) + 0
            }
        },
        20: {
            from: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) + 0
            },
        },
        21: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) + 0
            },
            to: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) +
                    (getRect(cards[10], 'bottom') - getRect(cards[10], 'top')) + 60
            }
        },
        22: {
            from: {
                x: 0,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) +
                    (getRect(cards[10], 'bottom') - getRect(cards[10], 'top')) + 0
            },
            to: {
                x: contWidth,
                y: (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[1], 'bottom') - getRect(cards[1], 'top')) +
                    (getRect(cards[2], 'bottom') - getRect(cards[2], 'top')) +
                    (getRect(cards[3], 'bottom') - getRect(cards[3], 'top')) +
                    (getRect(cards[4], 'bottom') - getRect(cards[4], 'top')) +
                    (getRect(cards[5], 'bottom') - getRect(cards[5], 'top')) +
                    (getRect(cards[6], 'bottom') - getRect(cards[6], 'top')) +
                    (getRect(cards[7], 'bottom') - getRect(cards[7], 'top')) +
                    (getRect(cards[8], 'bottom') - getRect(cards[8], 'top')) +
                    (getRect(cards[9], 'bottom') - getRect(cards[9], 'top')) +
                    (getRect(cards[10], 'bottom') - getRect(cards[10], 'top')) + 0
            }
        }

    }
    path.setAttribute('d', generatePath(pathBreakPoints))

}

const animateRobotEntrance = () => {
    let path = document.querySelector('#robot-path')
    superSectorIsActive = true
    setTimeout(() => {
        robot.classList.add('active')
    }, 500)

}

//Переместить робота
let prevPos = [1063, 0] // Начальная позиция
const moveRobot = () => {
    if (!superSectorIsActive) return false;
    let element;
    let x = document.querySelectorAll('.steps__slide.slide-steps')[9].getBoundingClientRect().bottom
    let cont = document.querySelector('.svg-path-container'),
        contHeight = x - cont.getBoundingClientRect().top;
    let scrollPercentage = (-cont.getBoundingClientRect().top) / contHeight
    var path = document.getElementById("trace");
    var pathLen = path.getTotalLength();
    var pt = path.getPointAtLength(scrollPercentage * pathLen * 1);
    let robots = document.querySelectorAll('.robots')
    robots.forEach(robot => robot.style.display = 'none')
    if (pt.x > prevPos[0]) {
        element = document.getElementById("robot-right");
        element.style.display = 'block'
    } else if (pt.x < prevPos[0]) {
        element = document.getElementById("robot-left");
        element.style.display = 'block'
    } else {
        element = document.getElementById("robot");
        element.style.display = 'block'
    }

    element.style.transform = `translate(${pt.x}px, ${pt.y}px)`
    prevPos = [pt.x, pt.y]

}

// Функция которая выполняется при полной загрузке страницы
const onLoad = () => {
    drawPath()
}

window.addEventListener('resize', drawPath)
document.addEventListener('DOMContentLoaded', onLoad)


// Функция которая выполняется при скролле
const onScroll = (e) => {
    moveRobot()

}

animateRobotEntrance();

window.addEventListener('scroll', (e) => {
    onScroll(e)
})