# Build a Stunning Fashion Studio Website with ReactJS (locomotive-scroll + gsap + framer-motion) > Build a stunning Fashion Studio website with React JS and enhance user experience with Locomotive Scroll, GSAP and Framer Motion. Follow along with the video tutorial to learn complex animations and scrolling effects. - **Source:** DevDreaming (https://devdreaming.com) - **Canonical URL:** https://devdreaming.com/videos/build-stunning-fashion-studio-website-with-reactJS-locomotive-scroll-gsap - **Author:** CodeBucks - **Published:** 2022-03-22 - **Last updated:** 2024-09-12 - **Topics:** React Js, Framer Motion --- **[▶ Watch on YouTube](https://www.youtube.com/watch?v=Ra1Fsa9YJCk)** ### Overview Right now there is a lot of websites that have these [smooth scrolling effects](/blogs/smooth-scrolling-in-react-js) and animations which makes you feel good when you just scroll them. I have used many different libraries to make such scrolling animations including `smooth-scrollbar` , `locomotive-scroll` etc. In the end, I came up with the combination of `gasp` + `locomotive` + `framer-motion` to create different effects with minimal effort. In the given video tutorial, you will learn how to build a stunning fashion studio [website using React JS](/videos/category/website-template), GSAP, Framer Motion, and Locomotive Scroll. These tools will help you create smooth animations and scrolling effects that will make your website stand out. Before starting this video you can checkout the following demo link👇 **Link🔗:** [Stunning fashion studio website built with ReactJS](https://wibe-studio.netlify.app/) ### What You'll Learn In this tutorial, you will learn: - How to create complex animations using React JS. - How to create scrolling effects using `gsap`. - How to use the advantages of `locomotive-scroll`. - How to use `framer-motion` in React JS for smooth animations. ### Key Features of This Fashion Studio Website - Unique and stylish design that showcases the fashion studio's products. - Smooth animations and scrolling effects using `gsap`, `framer-motion`, and `locomotive-scroll`. - Responsive layout that adapts to different screen sizes and devices. - The use of React JS, `styled-components`, and other libraries for a fast, efficient, and user-friendly experience. ### Tools and Libraries Used For this project, you will use the following libraries: - React JS (CRA) - GSAP for animations on scroll - styled-components for styling - Framer-motion for smooth animations on load - Locomotive scroll for smooth scrolling ### Code Links You can find the starter code for this project from [fashion studio website starter code](https://github.com/codebucks27/wibe-studio-starter-files). And, for the final code: [Fashion studio website built with ReactJS](https://github.com/codebucks27/wibe-studio).(Give ⭐ to this repo if you like it) ### Resources You can find all the resources used to make this website from the following: #### Video - "Walking Girl" video by [cottonbro](https://www.pexels.com/@cottonbro) from [Pexels](https://www.pexels.com). #### Images - Ring: Photo by [Arif Syuhada](https://www.pexels.com/@arifsyd15) from [Pexels](https://www.pexels.com). - Rings: Photo by [cottonbro](https://www.pexels.com/@cottonbro) from [Pexels](https://www.pexels.com). - Earings: Photo by [say straight](https://www.pexels.com/@say-straight-1400349) from [Pexels](https://www.pexels.com). - White Tee: Photo by [cottonbro](https://www.pexels.com/@cottonbro) from [Pexels](https://www.pexels.com). - black t-shirt girl: Photo by [Lena Hsvl](https://www.pexels.com/@lenaneva) from [Pexels](https://www.pexels.com). - Red girl: Photo by [Yaroslava Borz](https://www.pexels.com/@yaroslava-borz-126286496)Yaroslava Borz from [Pexels](https://www.pexels.com). - Ethnic Wear: Photo by [Artem Beliaikin](https://www.pexels.com/@belart84) from [Pexels](https://www.pexels.com). - Suit: Photo by [Chloe](https://www.pexels.com/@chloekalaartist) from [Pexels](https://www.pexels.com). - cap male: Photo by [cottonbro](https://www.pexels.com/@cottonbro) from [Pexels](https://www.pexels.com). - Watches: Photo by [Mister Mister](https://www.pexels.com/@bemistermister) from [Pexels](https://www.pexels.com). - Denim: Photo by [Denis Zagorodniuc](https://www.pexels.com/@imdennyz) from [Pexels](https://www.pexels.com). - Jacket: Photo by [Simon Robben](https://www.pexels.com/@simon-robben-55958) from [Pexels](https://www.pexels.com). - Yellow T-shirt: Photo by [RAUL REYNOSO](https://www.pexels.com/@raulkingr) from [Pexels](https://www.pexels.com). - Yellow Dress: Photo by [Godisable Jacob](https://www.pexels.com/@godisable-jacob-226636) from [Pexels](https://www.pexels.com). #### Quotes Used- - "Fashion is the armour to survive the reality of everyday life." by bill cunningham - "One is never over-dressed or under-dressed with a Little Black Dress." by Karl Lagerfeld ### Time Stamps The video tutorial has the following time stamps for you to follow along: - Channel Intro [@00:00:00](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=0s) - Intro + Demo [@00:00:10](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=10s) - Setup [@00:04:10](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=250s) - Creating Global Style [@00:07:45](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=465s) - Adding Locomotive Scroll [@00:14:15](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=855s) - Home Section [@00:15:38](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=938s) - Video Component [@00:18:36](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=1116s) - Logo Component [@00:30:25](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=1825s) - NavBar Component [@00:44:55](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=2695s) - About Section [@01:03:03](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=3783s) - Shop Section [@01:20:35](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=4835s) - Scroll Trigger Proxy Component [@01:29:50](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=5390s) - Banner Section [@01:54:45](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=6885s) - New Arrival Section [@02:03:35](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=7415s) - Footer Section [@02:24:35](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=8675s) - Loading Component [@02:46:24](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=9984s) - Let's make it responsive [@02:59:14](https://youtu.be/watch?v=Ra1Fsa9YJCk?t=10754s) --- ## Related on DevDreaming - [All Video Tutorials](https://devdreaming.com/videos) - [Blog & Tutorials](https://devdreaming.com/blogs) - [Free Developer Tools](https://devdreaming.com/tools) --- _This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._