Completion of each stagger element

[Alle]

Hi,
I would need help in making something with stagger.

I have created a small animation of letters appearing using svg.

I don't understand how I can intercept the end of each element called by the stagger.
 

I would like when the letters are disappearing the square to stretch as the letters disappear.

 

Example: 

H

HO

HOL

HOLA
-OLA  (the - is the square)
--LA   ( -- more width)
---A  (  --- more more  width)
----   (  --- total width)

1. With this code I make the letters appear inside the svg.

timline.to(".text-name path", 0.5,{
    opacity:1,
    y:0,
    stagger:0.1,
    ease: "Expo.easeinOut"});

2.  Then I make them disappear by reducing the y.

 

square_timline.to(".text-name path", 0.5,{
    delay:1.3,
    y:-100,
    stagger:0.1,
    ease: "Expo.easeinOut"});

 

3. Then I have a simple square. I've tried anticipating with "-=2" but it doesn't work well.
 

square_timline.to(".square", 2,{
    width: 500,
    ease: ""},"-=2");

 

 

I don't understand if I need to use an onUpdate or if there is an onComplete function on each element of the stagger.

Maybe I am thinking of a wrong method and there is a simpler one that I don't see.

I hope I have explained myself.

 

Thanks in advance to all.

 

[Cassie]

Hey pal!

Hard to say by looking at these snippets, could you make a minimal demo so we can help a bit more effectively?

[Alle]

Hi,
sure I will prepare a demo and post it here.
thanks 

[akapowl]

1 hour ago, Alle said:

I don't understand if I need to use an onUpdate or if there is an onComplete function on each element of the stagger.

 

You can call an onComplete for each staggered element, when using a stagger-object and calling the onComplete inside that stagger-object. But how exactly you'd have to go about that in your case can only really be said with a minimal demo to have a look at, as Cassie mentioned.

 

See the Pen d8a757340971cb2cb227d7578ba5977b by akapowl (@akapowl) on CodePen

 

[Alle]

18 minutes ago, akapowl said:

 

You can call an onComplete for each staggered element, when using a stagger-object and calling the onComplete inside that stagger-object. But how exactly you'd have to go about that in your case can only really be said with a minimal demo to have a look at, as Cassie mentioned.

 

 

 

thanks!!! 
👉 this.targets()[0]

I had actually tried with
stagger: {
         each: 0.5,
         onComplete: function() {

but I hadn't realized that I had to call it as : this.targets()[0] 

Now I understand how it works and so now I can try to link the bar.
Thanks a lot as always.

Have a great day everyone.