Why Uncaught TypeError: Cannot read property 'routePanel' of undefined?

Question

JavaScript

var onMapRouts = document.getElementsByClassName('route-on-map');
    ymaps.ready(function () {
        var control = myMap.controls.get('routePanelControl'); 
        for (let a = 0; a < onMapRouts.length; a++) {
            onMapRouts[a].addEventListener('click', function () {
                var office_id = onMapMarks[a].getAttribute('office-id');
                // Зададим состояние панели для построения машрутов.
                control.routePanel.state.set({  // здесь ошибка
                    // Тип маршрутизации.
                    type: 'masstransit',
                    // Выключим возможность задавать пункт отправления в поле ввода.
                    fromEnabled: true,
                    // Включим возможность задавать пункт назначения в поле ввода.
                    toEnabled: true,
                    // Адрес или координаты пункта назначения.
                    to: 'Москва, Льва Толстого 16'
                });
            });
        }
    });

I take the code from the example: https://tech.yandex.ru/maps/jsbox/2.1/route_panel_...
myMap is defined above, everything is fine with it, the map works.

Answer 1

Many many many pictures.

Answer 2

in fact, this is one image of a blurry circle with different values ​​​​of opacity, scale and positioning relative to the parent element. if you do not want. You can use parallax.js to set the background-atachment: fixed scroll to the parent block, and attach the rest of the elements to the same ul>li and position each as you need. Yes, the work is not the easiest, but interesting. If you are already completely perverted, then you can arrange some flashes through before and after in order to reduce the number of elements. I also advise you to visit codepen and try to look for something similar on canvas there. What the translator will tell you to look for)