Correct animation of Cards with PGIA


I just had an issue how to animate a section of cards correctly with Pinegrow interactions. I have a few cards / boxes / fields that are displayed next to each other (on desktop) and one below the other on mobile. I want them to appear when I scroll to them.

I could use a scroll scene on the parent div and target the cards, give them an animation and use the stagger so that they appear one after the other. But on mobile all the cards will appear automatically when I scroll to the first one (so I don’t see the others appearing).

I could target the cards directly to appear when I scroll to them. So in mobile they appear nicely one after the other when I scroll down. But on desktop they all appear in the same moment because I have no stagger (they are displayed next to each other and should appear with a stagger of 0.5s).

Is there a way to use a stagger when several scroll interactions would start at the same time triggered by the Apply To Many feature? This would always be helpful when you want elements to appear nicely with a stagger on desktop and mobile when you scroll to them.