DEV Community

Cover image for 🔥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]
CodeBucks
CodeBucks

Posted on • Edited on • Originally published at devdreaming.com

20 3

🔥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, 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 😉

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay