Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anael_

Stack elements on display grid

Go to solution Solved by nico fonseca,

Recommended Posts

Hello there,

 

I use GSAP to animate some "cards", and I will stack them on click.

I didn't found a suitable solution, here is my last try with a position: absolute change, but as you see, it's not very linear.

Can the Flip plugin help me ?

If you have a solution or advice i'll be happy to read it 😀 I am new in the GSAP world and I have a lot to learn.

Have a nice day

 

See the Pen abyoopa by anaelr (@anaelr) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Anael_, welcome to the forum ! 💚

There are many ways to solve this and I created one for you 🙂. The problem when using position absolute is that you lose the .container dimension (width, height) and if the elements were not positioned with position absolute animation can get weird.
So I created this, only animating the transform x, y, calculating the container dimensions and the left position of the element.

See the Pen XWareXV?editors=0110 by nicofonseca (@nicofonseca) on CodePen


 

I hope this helps 🙌

  • Like 6
Link to comment
Share on other sites

Thank you @nico fonseca !

It's perfect, I'll adapt it for vh dimensions ;)

Thanks for your help :)

 

 

  • Like 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.
×