# Build a Responsive ReactJS Website with GSAP & Styled-Components🤩

> Learn to build a responsive Agency Landing Page in ReactJS using GSAP for cool scrolling animations and parallax effects. Learn React Hooks, folder structure, GSAP, and CSS animations from the video tutorial.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/responsive-reactjs-website-gsap-styled-components
- **Author:** CodeBucks
- **Published:** 2021-05-12
- **Topics:** React Js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=aAEfBxcGpJ8)**

### Overview

In this video, you'll learn how to build an agency [landing page in ReactJS](/videos/category/web-app) using GSAP for cool scrolling animations and parallax effects. The video covers the entire process of creating the landing page from scratch, including the use of various tools and libraries. This website uses different libraries such as `react-slick` for carousel, `gsap` to add scrolling animation etc. Before starting this video you can checkout the following demo link👇

**Link🔗:** [Responsive website built in ReactJs](https://agency-website-eta.vercel.app/)

### What You'll Learn

By watching this video tutorial, you will learn the following:

- How to use React hooks
- The folder structure for [React projects](/videos/category/web-app)
- Creating a Hamburger menu with only CSS
- Leveraging the advantages of component structure
- Using `gsap` in ReactJS for animations while scrolling
- Various CSS animations

### Key Features of This Responsive Website

- Multiple sections such as home, about, services etc.
- Cool Animation Effects
- Unique design
- Mobile Responsive
- Unique approach to showcase your services
- Smooth animations using gsap
- Easy to customize

### Libraries Used

For this project, you will use the following libraries:

- CRA (create-react-app)
- Styled-components
- gsap
- react-slick

### Code Links

You can find the starter code for this project from [ReactJs website starter code files](https://github.com/codebucks27/Agency-website/tree/Starter-code-files).

And, for the final code from [Agency landing page in ReactJS](https://github.com/codebucks27/Agency-website/tree/main). (Give ⭐ to this repo if you like it)

### Time Stamps

The video tutorial has the following time stamps for you to follow along:

- Intro: [@0:00:00](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=0s)
- Demo: [@0:00:10](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=10s)
- Installation & Setup: [@0:04:50](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=290s)
- Folder Structure: [@0:07:40](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=460s)
- Header Section (Navigation Bar): [@0:19:15](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=1155s)
- Hero Section : [@0:45:36](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=2736s)
- About Section : [@1:16:10](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=4570s)
- Services Section : [@1:37:40](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=5860s)
- Testimonials Section : [@2:04:04](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=7444s)
- Contact Section & Footer: [@2:24:18](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=8658s)
- ScrollToTop Component : [@2:52:40](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=10360s)
- Adding Gsap Animation in Header and Service Section: [@3:01:30](https://www.youtube.com/watch?v=aAEfBxcGpJ8&t=10890s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._