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

#website-template#styled-components#react-js
30.6k views
893 likes
64 comments
watch on YouTube

Overview

In this video, you’ll learn how to build an agency landing page in ReactJS 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

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
  • 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

You can find the starter code for this project from ReactJs website starter code files.

And, for the final code from Agency landing page in ReactJS. (Give ⭐ to this repo if you like it)

Time Stamps

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