Radovan

the issue is that since the fonts are not mono space, this causes the spacing to be non even between fonts, if you look at the space between the W and o in Work. This is why I calculate the stagger delay according to the path length and the font size and then some other calculations for the spaces. I have this working peach perfect with css motion paths, but since safari ain't having none of that, I'm trying to replicate it with gsap. So basically the stagger custom delay equalizes the letter spacing regardless of the fonts width so the value can't be static. But I also don't want the loop to wait for the whole text to bunch up again I want the loop to continue on. Working example in css: http://new.andgustav.com/ Also keep in mind that the path will adapt to the screen size and the font size will adapt to always fill the path completely, but I can handle that if I have the repeat: -1 functionality with the stagger custom function

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