Jump to content
GreenSock

infiniteS3t

Repositioning Flex or Inline elements not working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

 

  • Like 2
  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×