The room webpage is the landing page for a fictional furniture store. The design is from frontendmentor.com. The page is responsive and designed for screens as small as 375px. The arrows trigger a sliding animation that dynamically loads the next slide. The mouse wheel can also trigger this transition.
React Transition Groups: To animate the sliding animation from one component to the next, I had to learn and implement CSSTransitions and learn how to manage them with my existing states.
CSS Animations: In addition to the React Transition Groups, I used CSS animations to achieve the sliding effect. To achieve the desired outcome, I learned how the two interacted, which included slowing the animation down and observing how the DOM reacted to the exchange of components and animations.
Responsive CSS Layouts: The responsive layout required using both media queries, and state management based on the window width. Combining the flex layouts and absolute positions allowed me to complete the design and sliding animation effect.
Once project is pulled, enter the main folder location and run npm install to add all the dependencies
cd ../[PROJECT-LOCATION]
npm installWhen all the dependencies are installed, the command npm run dev will launch the app on your local environment.
npm run dev