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,
})
})
}
