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
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.
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:
Header Section (Navigation Bar):
@0:19:15Adding Gsap Animation in Header and Service Section:
@3:01:30