Trouble with grid

[PixelPerfect]

Hello everyone!

 

I have problems with the grid section, where each of the elements must in turn "open up" to the full screen. At the same time, it is important that the elements "feel" each other next to each other, so that each of the elements is pushed out of the screen. Right now my animation is not working properly, as each of the elements does not expand to the full screen.

 

Please help me!

 

See the Pen qBwyoab by karjala_kilka (@karjala_kilka) on CodePen

[Cassie]

Hi there!

 

This is very layout-y so it's exactly the sort of challenge I'd use FLIP for.

 

https://gsap.com/docs/v3/Plugins/Flip/

However it's made a little more complex by the fact that you're controlling it with a scrubbed scrolltrigger as scrub relies on precalculated values and flip is more dynamic, so you'll need to update those values when the screen resizes.

See the Pen WNWKPZO?editors=0110 by GreenSock (@GreenSock) on CodePen