Stagger issue with appear-visible

[7iomka]

Hi. I have wrong behavior when I use stagger with appear-visible. Stagger make delay between each children, but if parent (in my case <XyzTransitionGroup /> (in Vue)) have appear-visible, that behavior needed changes: delay needed to be calculated between visible items, not total items! Why? If you have 15 items, 3 items per row, and for example from the docs

<XyzTransitionGroup
          appear-visible
          xyz="fade front-3 flip-down-50% duration-10 stagger-5"
         class="row"
>
   <div
            v-for="(item, i) in items"
            :key="i"
   > ...
   </div>
</XyzTransitionGroup>

First 3 items appear normally, second 3 items - ok. But when user scroll page, next 3 items and other already have a noticeable delay in their general appearance (the delay between each other still corresponds to the one specified in the settings).

How to fix that? Because of this, stagger for me is unusable for that case (is very common!).

[xxSkyy]

I've got exact same problem. It'd be good if it'd be fixed or added stagger-all for group or something Also without stagger I'd like to have function to show all items at one on appear-visible from group when first element got activated scroll. It can be misleading for users.

Also good option would be to chain them, so lets imagine you have some showcase with text and then list of items. You do XyzTransition(appear-visible .....) then elments that shows one after another and last alement are div with class .xyz-nested and xyz="delay" and inside having normal appear transition group XyzTransitionGroup.xyz-nested(appear) that triggers after parent animation completes

[7iomka]

Expected behavior for stagger animation with appear-visible parent https://codepen.io/GreenSock/pen/823312ec3785be7b25315ec2efd517d8

[mattaningram]

Yeah this is something that will take some changes to the logic to fix. Potentially we can automatically update the --xyz-index variable as the elements come into view, but I wouldn't be surprised if that causes glitchy behavior if you scroll very quickly. We'll take a look.

In the mean time I would suggest perhaps removing the stagger overall or manually adding a stagger to the first few elements with --xyz-index and then the rest just appear normally as they become visible.

[milesingrams]

This is definitely not doable with pure CSS. Will look into a javascript approach but ultimately the core idea of this project was to have a CSS based approach with framework specific wrappers to toggle the classes/variables. The main issue is that when using :nth-child for delays they stack up leading to big delays for later elements. Since CSS does not allow :nth-of-type to target classes, we have no CSS way of detecting, say, the third element Currently animating and instead can only detect its index position in the parent.