![Cover image for š„Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5tr3jzc7v3hoeiddt6n.png)
Hey thereš,
Right now there is a lot of websites that have these smooth scrolling effects 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.
You can see the Demo from hereš
https://wibe-studio.netlify.app/
For this project, I have used these libraries,
ā¶ļø React JS (CRA)
ā¶ļø GSAP for smooth scrolling animations
ā¶ļø Styled-Components for styling
ā¶ļø locomotive-scroll for smooth scrolling
ā¶ļø framer-motion for stunning effects
Before making such a website I had to think about the theme of the website. Because we can not use this kind of animation in all types of websites. Thus, I choose to make a fashion studio website where I can use good images/videos as well.
I have used the locomotive-scroll + gsap combination to add some custom animations.
I wanted to make it more interactive so I have added framer-motion for some effects on the load of the component and link elements.
Here is the tutorial on how I have created this website!
Before using this website for commercial purposes, make sure to check the license of all images and other assets.
I will try to improve its speed and performance.
Feel free to try different designs and animations with it,
Try to tweak some of these effects and you can also tag me or share your link in the comments.
Any suggestions are welcomed!
Thanks For Readingš
Feel free to visit my youtube channel:
@CodeBucks
Follow me on Instagram where I'm sharing lots of useful resources!
Top comments (0)