Stagger Animation - Any way to animate out an element when removed from target array?

[Jacklifear]

Hello.  This is a basic question regarding my StaggerTo animations.  For scope of this, I'm using 2.x still and am using StaggerTo to animate a hand of cards and all of them work beautifully when adding new references to the array.  When adding a reference/element to the middle of any stagger or removing an element from an array, I get some experiences I didn't expect.

 

Delete from the array: It doesn't animate out or in reverse as I expected, it just "pops" out of existence.

Example: https://gyazo.com/a6cb14ef2b75f9dd40eaf4393581db93

Add to middle of an array: The index and all items after the index are removed, and then they are animated in afterwards. 
Example: https://gyazo.com/d8e710656e77aeab1ad67110325b871d

 

After research I'm not able to find out if there's a way to work a different stagger, or a setting that can be flipped to enable animations when an item is removed

from the array.  Or is it this way by design?

 

I looked into make a codepen example, but I lack the skill to recreate the React Hooks + GSAP in codepen in any semblance of a reasonable timeframe, figured with this question it could be a quick answer before I potentially tried to do a lot of work for something that could be as simple as "not by design!".

 

If anyone is kind enough to read and respond to this, I would greatly appreciate it. 

[ZachSaucier]

Hey Jacklifear.

 

Without seeing your code it's impossible to say why the deleted element doesn't use any out animation that you're trying to do.

 

25 minutes ago, Jacklifear said:

After research I'm not able to find out if there's a way to work a different stagger, or a setting that can be flipped to enable animations when an item is removed

from the array.  Or is it this way by design?

I'm not sure what you're talking about here. You should be able to apply new animations at any point or reverse old animations. 

 

26 minutes ago, Jacklifear said:

I looked into make a codepen example, but I lack the skill to recreate the React Hooks + GSAP in codepen in any semblance of a reasonable timeframe

You don't have to even use React in the CodePen demo. Just have some rectangles that animate similarly to your cards  

 

I think you should provide a demo of your setup. Using other sites like CodeSandbox or StackBlitz would allow you to keep React more easily if you feel like that's relevant (though I'd argue it's not). 

[Jacklifear]

Thanks for the clarity.  I'll hop in after I get awake for a bit.