Stagger animation with custom function for the delay times but keep the repeat -1 functionality

[Radovan]

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

See the Pen yLgzjaW by robal123fgsdfgdfg (@robal123fgsdfgdfg) on CodePen

[PointC]

Hi @Radovan

 

Welcome to the forum.

 

Maybe I'm not understanding the desired outcome correctly, but I think you could use amount:12 and repeat:-1 in your stagger object rather than the custom function and all the delays.

 

See the Pen 91309c0bbef21a9797a88b6adeb92a8a by PointC (@PointC) on CodePen

 

Is that what you needed?

 

Happy tweening.

 

[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

[PointC]

Yeah - I see the spacing issue. I'm not sure if we can get the infinite repeat without the advanced stagger object here or not. @GreenSock may have to stop by or @OSUblake may have an answer on this. I've never used the custom function for delays in the wild so I'm not sure about this one.

 

I'd probably just loop through and add them all to a timeline, but if that causes performance issues for you, I guess that's not an option.

 

Sit tight. The big guns may have some ideas here.

[OSUblake]

20 hours ago, Radovan said:

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. 

 

You might be able to use a hidden element with a single motion path, and then read the x, y, and rotation from it at as specific point in time.

 

Just a quick example only using 1 one char. It's not aligned to the path because I didn't feel like messing with your html.

 

See the Pen b616d73d312fe9b963935bcf7d0bae46 by osublake (@osublake) on CodePen

 

 

 

 

[OSUblake]

An alternative to using the modifiers plugin would be to just update the style in a ticker call as it might be performant. 

 

Looks a little wonky, but you should be able to tweak it.

 

See the Pen ae8e38fb04731255fd2e91e2213292ad by osublake (@osublake) on CodePen