DEV Community

loading...
Cover image for Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations

Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations

CodeBucks
Hey, I'm Web Developer, Roaming around Code and Philosophy! I like to learn about web as well mobile apps everyday! 😉😄
Updated on ・2 min read

Hi there,

Recently, I saw an website with cool scrolling effects and so I have decided to create website in ReactJS with cool scrolling animations using GSAP.

Here is the Demo Link:
https://agency-website-eta.vercel.app/

For this project I have used these libraries,
▶️ reactjs
▶️ GSAP for scrolling animations
▶️ Styled-Components
▶️ React-slick and slick-carousel for Carousal

First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.

Here is the tutorial how I have created this website!

Things that I have learned building this project,
▶️ Good Folder structure for React Projects
▶️ How to create Hamburger Menu with only css
▶️ How we can leverage advantages of component structure
▶️ How to use GSAP in React JS for awesome animations while scrolling
▶️ Uses of Lazy and suspence in reactJS
▶️ Many awesome CSS animations etc.

You can use this to learn or for your portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.

I will try to improve it's speed and performance.
I haven't added react-router yet but if you want to create more pages then you can add it and feel free to create more sections.

Any suggestions are welcomed!

Thanks For Reading😄

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Instagram where I'm sharing lot's of useful resources!

@code.bucks 😉

Discussion (0)