Hello,
so I have an issue, where I have a svg path animation with non uniform elements that are set on the path be animated. The issue is that I need to set custom staggers for each element but I want them to loop immediately and not wait for the whole tween to finish before they loop.
I could set each item as a separate animation on the same path, but that causes major performance issues and safari starts to complain about power usage.
I know that advanced stagger has the repeate: -1 option but I'm unable to find a way to apply the same option when I have a custom function for the stagger value.
Is there a way to achieve this without setting a separate delayed animation for each individual character?
my current single init code.
const ga = this.tl.from(this.split[0].chars, {
paused: false,
duration: 12,
repeat: -1,
repeatDelay: 0,
//delay: char.style.getPropertyValue('--char-delay') / 1000,
yoyo: false,
ease: "none",
immediateRender: true,
motionPath:{
path: '#desktopPath',
align: "#desktopPath",
autoRotate: true,
alignOrigin: [0.5, 0.5],
},
stagger: function(index, target, list) {
console.log(index);
// your custom logic here. Return the delay from the start (not between each)
return target.style.getPropertyValue('--char-delay') / 1000;
}
});