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 arti…

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

Grid to Fullscreen animation

Questions

manthrax March 8, 2024, 6:27pm 2

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

Topic		Replies	Views
How to do the Tao Tajima menu gallery image snap into viewport animation Questions glsl , textures , materials , shaders , animation , threejs	3	347	March 5, 2024
[Solved] Fitting an object to cover the whole canvas a la CSS `object-fit: cover` Questions geometry , camera , perspective-camera , canvas , zoom	9	3541	July 17, 2023
Custom cover() function for mimicking css background-size 'cover' for shaders, OrthographicCamera, TextureLoader, and PlaneBufferGeometry Questions texture-loader , shaders , orthographic-camera	10	912	March 18, 2024
Recreate this Effect Questions	5	253	January 21, 2025
How do we scale the PlaneGeometry based on the aspect ratio Questions geometry	2	737	May 3, 2023

Grid to Fullscreen animation

Related topics