How to handle grid in gsap animation?

[Zagros]

Hi, I want to make a page that it has 3 picture every single picture will handle a new horizontal section, but i've a very big problem and as I've searched about this subject and I didn't found anything about it , I made this topic .

 

 

more about the project: 

 I made this codepen with grid and i've 3 pic , I want to when i click to this images (sections) the image open full height and full width of the page, but when i handle this with grid nothing happened. just I can handle this problem with height and in height changes I've too many bug that the images will be animate messy after 2 or 3 click on them .

Can i use grid in gsap animation ? or I can just handle this problem with height?

 

See the Pen XWbpXGN by pourya_sanboy (@pourya_sanboy) on CodePen

 

I just want to change the size of the section just in the view port

See the Pen KKpNLBW by pourya_sanboy (@pourya_sanboy) on CodePen

[ZachSaucier]

Hey Zagros and welcome. 

 

It's not very clear to me how you want the images to behave. How does the first demo you posted relate to the second one? Can you please try to write out step by step the behavior of what you're trying to accomplish?

[Zagros]

2 hours ago, ZachSaucier said:

Hey Zagros and welcome. 

 

It's not very clear to me how you want the images to behave. How does the first demo you posted relate to the second one? Can you please try to write out step by step the behavior of what you're trying to accomplish?

well , as you see i did it with css in my first codepen view ...but i need it with gsap 

It's about 3 image , When user hover on it it should cover the page without lag or bug...

this is my problem now .  

[ZachSaucier]

So you have 3 rows and you want the hovered one to fill the viewport's height. Does it matter how they are positioned? You want the other two rows to be hidden? Will there be any text content inside of each row or is it only an image?

[Zagros]

1 hour ago, ZachSaucier said:

So you have 3 rows and you want the hovered one to fill the viewport's height. Does it matter how they are positioned? You want the other two rows to be hidden? Will there be any text content inside of each row or is it only an image?

Yup,

and yes the first image should come over the two other image and the center one should come up on the first and the last image in same time and the third one should come over the second and first image.

yes i want to hide others two rows

after the image come to viewport's height then i need to show the text 

 

[ZachSaucier]

I think I might try using flexbox:

See the Pen KKpaQpp by GreenSock (@GreenSock) on CodePen

[Zagros]

34 minutes ago, ZachSaucier said:

I think I might try using flexbox:

 

 

thx for replying too fast but if I use images not background it doesn't work for 100vh size of the  viewport 

[ZachSaucier]

2 minutes ago, Zagros said:

if I use images not background it doesn't work for 100vh size of the  viewport

You can work through that with CSS. Unfortunately we don't have the capacity to do every project that people make a forum thread about. We're happy to help if you have any GSAP-specific questions!