Animate an group to fullscreen that's in an repeating group

I want to make an animation, that when a user clicks on a card (group) in a repeating group the card gets full screen with a transition, from the position where the card is in the repeating group. So the full screen card is the card you clicked on.

First I tried this:
I created an repeating group with a group inside and when i click on that group i set a state on that group “fullscreen” = “yes” and in the conditions of that group i set the condition when “fullscreen” = “yes” then the width and height will be 100% and i set a transition on the width and height.

But this scales the group inside the repeating group and the card needs to be fullscreen outside the repeating group. So I need a “new” group that’s not in the repeating group and can scale without depending on the repeating group.

Second try:
I tried another approach and created a floating group that is invisible at the start of page load and when i click on the group inside the repeating group i start a workflow that reposition the x and y from the floating group with the x y from the mouse position and show the floating group. This works fine but the floating group needs to animate to full screen from the size of the group inside the repeating group till 100% width and height.

There for i set the state of the floatinggroup to “fullscreen” = “yes” and the condition on the floating group with when “fullscreen” = “yes” then 100% width and height. But then it doesn’t work any more. The condition kicks in first so the floating group gets visible but starts x y at 0,0 (left upper corner) and not at the position of the mouse.

Does anybody know how I can fix this? Or has a better idea?

This topic was automatically closed after 70 days. New replies are no longer allowed.