/moving-bento-grid

Demo of moving bento grid used on my portfolio mnsh.me

Primary LanguageTypeScript

Moving bento grid demo

This is a simple demo of moving bento grid animation on my personal site, countless people have asked the source code so I just open sourced the grid part.

How it works?

Most of the grid heavy lifting is done by react-grid-layout, react helps in changing the grid config when clicking on nav buttons and since react-grid-layout uses transforms, adding css animation to react-grid-item allows for smooth transitions.

index.css

.react-grid-item.react-grid-placeholder {
  background: rgba(0, 0, 0, 0.438) none repeat scroll 0% 0%;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 32px;
  transition: all 500ms ease 0s !important;
  will-change: transform;
}

.react-grid-item {
  transition: visibility 500ms ease 0s;
}

Some gotchas

  • You need to import react-grid-layout styles from node_modules in your global CSS.
  • I manually wrote the grid configuration for my site for each of the different layouts. There might be a better way to create or generate this configuration.

How to run locally

  • Clone/fork the repo: git clone https://github.com/manish-basargekar/moving-bento-grid.git

  • Install node_modules npm i

  • Run the vite app npm run dev

Feel free to contribute and suggest improvements!