/react-pic-gallery

React photo gallery with animation from Framer-Motion and the Masonry component from MUI.

Primary LanguageJavaScript

React Photo Search With Axios and Framer Motion

Layout

  • Header fixed to top
  • Header with backdrop filter
  • Parallax scroll

What I Want To Happen When We Search

  • Loading icon appears
  • Images fade in from bottom
  • Scroll progress bar appears
  • When scrolling to bottom, more pictures are loaded
  • When more pictures are loading, scroll progress bar reflects this

What I Want To Happen When an Image is Clicked On

  • Enter gallery modal
  • Vertical scroll is locked
  • Scrolling navigates the gallery modal (down: next image, up: prev image)
  • Gallery has backdrop blur
  • Clicking outside of gallery closes it

Other

  • Smooth and springy scrolling
  • Smooth height expansion when loading new images
  • Light/dark mode switch
  • Refactor to useContext+useReducer