Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll GSAP Framer Motion ]

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 then 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!

@code.bucks