Repositioning Flex or Inline elements not working

[infiniteS3t]

Hey everyone, I have recreated the card animation from the iOS app store, but having problems with the positioning when wrapping multiple cards on to one line.  In the attached pen, when the user clicks a card, the card should expand to the whole screen and at the same time reposition to the top of the viewport.  The animation works great for the first card in each row, but every card after that in a row will not travel to the top of the viewport and stops about halfway up the page.  Anyone have any suggestions on how to correct this unwanted behavior?

See the Pen RvWMMx?editors=0110 by InfiniteSet (@InfiniteSet) on CodePen

[GreenSock]

Welcome to the forums, @infiniteS3t. And thanks for providing a codepen demo. 

 

We really try to keep the questions here focused on GSAP-related stuff. This sure sounds like more of a general DOM/CSS issue (correct me if I'm wrong and you think there's some kind of GSAP problem going on). I wish I had the time to read through all the code and identify the layout issues at play, but unfortunately I don't. Perhaps someone else has some ideas to share, though. 

 

Again, if I misunderstood and this was a GSAP-related question, just let me know. 

[infiniteS3t]

Sorry for the confusion.  I thought the issue was with GSAP, but I have taken out the animation and the same issue is occurring.  Thank you for the reply.

[mikel]

Hi @infiniteS3t,

 

Welcome to the GreenSock Forum.

 

Take a look at this example of our expert @OSUblake.
He calls it simple, but some calculations are needed.

 

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

He also has a playground regarding flex:

 

See the Pen dMLQJr by osublake (@osublake) on CodePen

 

Best regards

Mikel