Jump to content
Search Community

Gsap "Flip" grid

Samuele test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi all, I'm using Gsap's flip plugin (which works very well) to change randomly the position of the square item in a grid.

I simply set a css rule to the container:

  display: grid;
  grid-template-columns: repeat(7, 1fr);

And to every child (to keep it square):

    aspect-ratio:1;


The fact is that the red section under the grid goes up whenever the animation is running.
I guess it is a rule that the flip plugin sets to all the elements, like an "absolute" position?

Is there a way to keep the section fixed without specifying the heights in pixels of the item?

See the Pen popLMgX by sml-k (@sml-k) on CodePen

Link to comment
Share on other sites

  • Solution
7 minutes ago, Samuele said:

I guess it is a rule that the flip plugin sets to all the elements, like an "absolute" position?

 

It is right there, set in your Flip.from() ;) ...without that setting it works like you probably expected (?) . 

 

  // Animate the change
  Flip.from(state, {
    absolute: true	// <----
  });

 

See the Pen YzYOYrq by akapowl (@akapowl) on CodePen

  • 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.
×
×
  • Create New...