[Alternative for ["{self}"] parameter with DrawSVG in gsap 3]

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

[Alternative for ["{self}"] parameter with DrawSVG in gsap 3]

Please look at this example:

See the Pen YzZyKwZ by arreumb (@arreumb) on CodePen

, 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. 

[Alternative for ["{self}"] parameter with DrawSVG in gsap 3]

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 ...

[Alternative for ["{self}"] parameter with DrawSVG 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);
}