Timeline for Anime.js (motion path)

19 Views Asked by At

In the component I have an animation, a line is drawn along the path of the SVG. It is divided into several steps, everything is fine with this, it works fine.

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'
                );

Now I need a certain element to “ride” in front of this line, on its “head”, so to speak. There is an element, you can draw it along the entire line using this:


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

The goal is to make the mark also move with the line. Following the same steps, with the same delays. Please help me implement this.

0

There are 0 best solutions below