uarreghini

Thanks a lot for your great support, I definitely need to spend more time on the documentation.

Please look at this example: https://codepen.io/arreumb/pen/YzZyKwZ, what I try to achieve is: draw the outline of the first letter and then fill it with a color before starting to draw the outline of the second letter and repeat this for all the letters. Using stagger: {each:1, onComplete: onComplete} is extremely slow so I was searching a way to pass to an external function the svg path to fill. I could do that in gsap 2 using ["{self}"] but now it seems I only have an array with all the paths but no information on what is the current path to fill.

Hi Mikel, thanks for your answer, it can surely solve the problem but I'm still curious to know how I can pass the svg path to a function in gsap 3 ...

In gsap 2 I had a timeline to first draw the stroke of each letter of a svg text and then fill it with a color after the stroke is complete but now in gsap 3 I can't figure how to pass the correct argument to the fillLetter function. tl.staggerFromTo($('#layer1 path'), 0.5, {'drawSVG': "0%", 'visibility': "visible"}, {'drawSVG': "100%", 'onUpdate': fillLetter, 'onUpdateParams': ["{self}"], 'ease': Linear.easeInOut}, 0.20); function fillLetter(istance) { setTimeout(function () { istance.target.style.fill = "#0d47a1"; }, 200); }