3D Isomentric Grid. 100% Webflow build

Hello guys! :slight_smile: :innocent: :relaxed:

Want to share with you the result of my inspiration this weekend.

Interactive scrollable 3D Isometric Grid. Build 100% in Webflow.

http://3disometric-grid.webflow.io/

Inspired by Codrops Article ( Isometric Grids | Demo 1 | Codrops)

21 Likes

That’s awesome @sabanna, great job! So cool :slight_smile: Going to share this :wink:

Thank you @cyberdave :smiley: It was fun!

1 Like

This is soooooooooooooooooooo amazing Anna! :smiley:

1 Like

Thanks, Vlad! :smiley: I am even glad that @vincent teased me with this Codrops link LOL

1 Like

Brilliant stuff! :slightly_smiling:

1 Like

Are you kidding me?? I want this for my new portfolio for my site!

1 Like

you are cool developer :sunglasses:

3 Likes

Thanks, guys :slight_smile:
@DFink, here is a link to the project https://webflow.com/website/3disometric-grid. If you will need to look on it “from inside” :slight_smile:

2 Likes

Awesome! Saw this on Codrops also and was going to give it a shot, glad to see it’s possible with Webflow.

1 Like

@sabanna Thanks girl! I was struggling to get the effect right yesterday night and thanks to you public link, I got to see where my mistake was.

I made a version using flexbox and interactions only. It has multiple stacked layers. Let me know what you guys think. I believe there’s more ways to improve this.

Something that troubles me, the “trigger” area can be a bitch sometimes. Happens on both Sabanna’s and my version, where certain areas you hover would make the animation jumping up and down.

Preview: http://awtm.webflow.io/

Share link: https://preview.webflow.com/preview/awtm?preview=07712e2851343023b1a24e5c0f070b65

3 Likes

Very cool, @alexanderwong!!! :smiley: About that “jumping”: it is really issues of 3D transforms :/. Don’t know how to fix it.

1 Like