Page transition from grid to fullscreen, Three.js

Design help Custom code
1

Dear Webflow community I found this really amazing three.js animation from CJ Hersh. https://www.flowbase.co/guides/grid-to-fullscreen-animations

I tried to implement it on my own portfolio site using his shared project on Weblow.

I got it to work but only on one element and not on the copied ones.
https://page-transition-webflow.webflow.io/

https://preview.webflow.com/preview/page-transition-webflow?utm_medium=preview_link&utm_source=dashboard&utm_content=page-transition-webflow&preview=efc30416cd88362d1e8f29abe55bd629&mode=preview

Could somebody make a guess what it could be and how to change it so that every object triggers the same animation. Thanks in advance, I really need your help guys. I need to apply for some open ux/ui position real soon.

Three.js
Page transition

2

Hi Snow and welcome to the forum!

I think it’s possible that they all have to be part of the same grid element.

I hope you’ll get that ui/ux position :slight_smile:

1 Like
3

Thanks, Vincent
That was a superfast reply!

4

For everybody who’s interested, I got it to work. It looks really neat, love it.

https://page-transition-three-js.webflow.io/

https://preview.webflow.com/preview/page-transition-three-js?utm_medium=preview_link&utm_source=dashboard&utm_content=page-transition-three-js&preview=efc30416cd88362d1e8f29abe55bd629&mode=preview