This content originally appeared on DEV Community and was authored by CodeBucks
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 ?
This content originally appeared on DEV Community and was authored by CodeBucks
CodeBucks | Sciencx (2021-05-13T10:25:10+00:00) Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations. Retrieved from https://www.scien.cx/2021/05/13/build-website-with-reactjs-styled-components-and-gsap-for-scrolling-animations/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.