[motionpath target multiple objects and gap between on one path]

that is perfect!!🥰

thank you

[motionpath target multiple objects and gap between on one path]

tnx,

so im tring to make them all start at the same time (no delay..)

and create a space between them on the path

[motionpath target multiple objects and gap between on one path]

hi. i did "fork" and made my demo in codepen.

how can i show it here?

 

See the Pen GRXvzgB by morag_h (@morag_h) on CodePen

[motionpath target multiple objects and gap between on one path]

hi there,

im using motionpath.

i have an array of multiple objects. and they all need to loop on the same path.

my problem is the space between the items. i did a delay but when you get to the section not all of them started the loop yet..

 

how can i create a space between them on the path?

thank you

here is my code:

//values elips
    if ($(".elips").length > 0) {
        const elips = document.querySelector('.elips')
        const elipsMobile = document.querySelector('.elips-mobile')
        const hpValues = gsap.utils.toArray('.hp-value');
        hpValues.forEach((hpValue, i) => {
            gsap.to(hpValue, {
                motionPath: {
                    path: isDesktop ? elips : elipsMobile,
                    align: isDesktop ? elips : elipsMobile,
                    alignOrigin: [0.5, 0.5],
                    //autoRotate: -90,
                    immediateRender: true,
                },
                opacity: 1,
                repeat: -1,
                duration: 20,
                ease: "none",
                delay: i * 2,
            })
        })
    }