Tile animation as main navigation of site
Hello there,
I am working on a website for a client and I've come up with an interesting design where the main navigation is four tiles centered in the screen and when a specific title is click they all move the the out corners of the screen, revealing the content behind that tile. Depending on which tile is click the other tiles will be group to the corner differently.
Kind of confusing to explain, but its pretty simple when you see it. Here is a figma prototype to check out: https://www.figma.com/proto/Ivlj1ciCBtTUJCw2eYsOq9/Roswell.pics?node-id=5-51&starting-point-node-id=5%3A51&mode=design&t=LVXGY9DxxchTfrxW-1
I just was wondering if anyone could give me a brief walkthrough on how to achieve this, with some kind of overlay or animation library, I was considering doing this in React.js, or just any ideas would be great.
5 Replies
@jjroby_1993 i've recreated the design to help you out a little. Unfortunately i'm not too experienced with js yet, however i've got an idea of what you can do with it, so i've left some comments at the top of the css file with what you need to do to make it work the way you'd like. The default layout here is the links being in the middle as you mentioned. Throughout the css there are some commented out properties, If you uncomment those, it will change the layout to where the links are in the corners. It explains what each commented out property does at the top. When implementing the js, make sure to remove those commented out properties afterwards. Hopefully this helps you get on the right path! https://codepen.io/deerCabin/pen/oNJwvjJ
taking a look now
was it sort of what you wanted or not really so much?
I actually already have something like this, I appreciate the example tho. But yeah trying to figure it out with FLIP animation technique.
Oh I didn’t think you had it already. No worries then 👍🏻