Grid to Fullscreen animation

Hi there, I’m tryna do this animation where there’re some grid items on viewport and when one is clicked it expands to full-screen and I think I did it but somehow I can’t get the planeGeometry to cover the full-screen instead it’s stretching from each left and right sides. I cloned the codrops article author’s project, how can I do it.
Here’s my ongoing sandbox project (when a plane is clicked it expands, and menu button on to make it collapse back to it’s initial position)
https://codesandbox.io/p/sandbox/grid-to-fullscreen-mf2t9n

I thought this has already been answered? I coded a solution for you, and you independently found your own partial solution? Might be worth exploring the solutions presented to you instead of just asking again, or at the very least, linking to the first post to provide context for anyone who choses to devote time to trying to help you.

4 Likes

Nah somehow the scaling is not working, I tried multiple solutions but none working. The plane should be covering the camera viewport(fov) but it’s acting different. So what I was experimenting is that to like put different pages inside each plane as textures and use this main scene as Menu navigation and when a plane is clicked it expands to a page and user can explore that page but last night i found out that it can’t be done so I decided to do this anyways to make a image gallery instead :(.

The shader I wrote covers the viewport in the smallest direction to show the whole image. The sizing x/y can be flipped to make it cover the whole viewport instead with a small change. The shader isn’t very complex. I updated it here: https://codesandbox.io/p/sandbox/shader-forked-xp469x

Oh right it’s covering camera viewport, thx man. I’ll do a little bit more experimenting and get each corner to interpolate with different speed to get that original effect. :hugs:

1 Like