Разбить анимацию на шаги

В компоненте у меня есть анимация, по пути свг рисуется линия. Она разбита на несколько шагов, с этим все хорошо, работает норм.

            const path_length = anime.setDashoffset(svgPath);
            
            const step1 = 3600;
            const step2 = 2000;
            const step3 = 400;

            const line123 = anime.timeline({
                easing: 'easeInOutSine',
                duration: 8500,
                loop: false,
                
            });

            line123
                .add({
                    targets: svgPath,
                    strokeDashoffset: {
                        value: [path_length, step1],
                        easing: 'easeInOutSine',
                        duration: 2500
                    }
                })
                .add(
                    {
                        targets: svgPath,
                        strokeDashoffset: {
                            value: [step1, step2],
                            easing: 'easeInOutSine',
                            duration: 2500
                        }
                    },
                    '+=1000'
                )
                .add(
                    {
                        targets: svgPath,
                        strokeDashoffset: {
                            value: [step2, step3],
                            easing: 'easeInOutSine',
                            duration: 2500
                        }
                    },
                    '+=1000'
                )
                .add(
                    {
                        targets: svgPath,
                        strokeDashoffset: {
                            value: [step3, 0],
                            easing: 'easeInOutSine',
                            duration: 1000
                        }
                    },
                    '+=1000'
                );

Теперь мне нужно, чтобы впереди этой линии, на её так сказать "голове", "ехал" некий элемент. Элемент есть, провести его по всей линии получается с помощью этого:

const marker_path = anime.path('.wrapper path');

            anime({
                targets: '.wrapper .placemark123',
                translateX: marker_path('x'),
                translateY: marker_path('y'),
                easing: 'easeInOutSine',
                duration: 8500
            });

Задача состоит в том, чтобы метка также двигалась вместе с линией. По тем же шагам, с теми же задержками. Помогите пжлст реализовать это.


Ответы (0 шт):