## How to build a studio Landing Page with JavaScript and GSAP’S ScrollTrigger Plugin
The usage of animation raises a website's aesthetic appeal and facilitates user navigation better. The widely used GreenSock Animation platform (GSAP) is a fantastic toolset for creating animations. It offers exceptional effeciency, handles browser incompatibilities for you, and has been used in about 11,500,00 websites to date, among other fantastic qualities.
Before you begin, make sure you have GSAP and ScrollTrigger on your project. If you don't have them already, you can install them using npm:
```Tag
npm install gsap
npm install scrolltrigger
```
### prerequisites
knowledge on Html, Css and JavaScript.
### Table of contents
1. Why use the GSAP scrollTrigger
2. Creatng the project
3. Adding content to the Html file
4. Website animation with GSAP and ScrollTrigger
### Why use the GSAP with ScrollTrigger plugin
GSAP allows you to animate anything on your website that can interact with JavaScript.
Moreover, there is a shortcoming that arises from GSAP'S object animations in the website.
When the animations are played off-screen, you would notice that the animations already played before you scroll down to the section, preventing you from seeing the act.
This led to the creation of scrollTrigger Plugin. The Plugin fixes this issue enabling you to control when the animations should be triggered.
### Creating the Landing page using scrollTrigger
It would be better to familiarize with the scrollTrigger features and functions before starting to build up a Landing Page with it.
Some of its feature and example can be found[here](https://codepen.io/umarmuh65823803/pen/yLpOPyN).
You'll need to create a folder and name it say GSAP'S page.
create the 'idex.html', 'style.css', 'index.js' and images file.
### Adding the content to the Html file
Copy and add the following code to your 'index.html' file.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="index.js" defer></script>
</head>
<body>
<header class="header">
<nav>
<div class="navbar">
<img src="images/logo.svg" alt="" />
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Supports</a>
</li>
</ul>
<img class="hamburger" src="images/icon-hamburger.svg" alt="" />
</div>
<div class="advert">
<h1>IMMERSIVE EXPERIENCES THAT DELIVER</h1>
</div>
</nav>
</header>
<section>
<div class="img-div">
<img
class="interactive-img"
src="./images/image-interactive.jpg"
alt="vr-image"
/>
</div>
<div class="interactive-div">
<h3>THE LEADER IN INTERACTIVE VR</h3>
<p>
Founded in 2011, Loopstudios has been producing world-class virtual
reality projects for some of the best companies around the globe. Our
award-winning creations have transformed businesses through digital
experiences that bind to their brand.
</p>
</div>
</section>
<article>
<div class="label">
<h3>OUR CREATIONS</h3>
<button>SEE ALL</button>
</div>
<div class="photos">
<div class="box img-box1">
<img src="images/image-deep-earth.jpg" alt="" />
<p>DEEP EARTH</p>
</div>
<div class="box img-box2">
<img src="images/image-night-arcade.jpg" alt="" />
<p>NIGHT ARCADE</p>
</div>
<div class="box img-box3">
<img src="images/image-soccer-team.jpg" alt="" />
<p>SOCCER TEAM VR</p>
</div>
<div class="box img-box4">
<img src="images/image-grid.jpg" alt="" />
<p>THE GRID</p>
</div>
<div class="box img-box5">
<img src="images/image-from-above.jpg" alt="" />
<p>FROM UP ABOVE VR</p>
</div>
<div class="box img-box6">
<img src="images/image-pocket-borealis.jpg" alt="" />
<p>POCKET BOREALIS</p>
</div>
<div class="box img-box7">
<img src="images/image-curiosity.jpg" alt="" />
<p>THE CURIOSITY</p>
</div>
<div class="box img-box8">
<img src="images/image-fisheye.jpg" alt="" />
<p>MAKE IT FISHEYE</p>
</div>
</div>
</article>
<div class="virtual-reality">
<img
class="layer"
src="https://cdn.pixabay.com/photo/2021/11/22/00/02/interior-design-6815493__340.jpg"
alt=""
/>
<img
class="layer"
src="https://cdn.pixabay.com/photo/2022/03/03/21/30/vr-7046094__340.jpg"
alt=""
/>
<img
class="layer"
src="https://cdn.pixabay.com/photo/2021/12/24/13/01/vr-6891052__340.jpg"
alt=""
/>
<img
class="layer"
src="https://cdn.pixabay.com/photo/2021/12/26/03/48/earth-6894160__340.jpg"
alt=""
/>
<img
class="layer"
src="https://media.istockphoto.com/vectors/astronaut-looking-on-earth-from-alien-planet-vector-id1324630423?k=20&m=1324630423&s=612x612&w=0&h=b1-F0bexQ28zFZEl4igb1Nlda6zkmjDu_goGv3dg-Xc="
alt=""
/>
</div>
<footer>
<div class="logos">
<img src="images/logo.svg" alt="" />
<div class="icons">
<img src="images/icon-facebook.svg" alt="" />
<img src="images/icon-twitter.svg" alt="" />
<img src="images/icon-pinterest.svg" alt="" />
<img src="images/icon-instagram.svg" alt="" />
</div>
</div>
<div class="bottom">
<ul id="footer-list">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Support</a>
</li>
</ul>
<p>© 2021 Loopstudios. All rights reserved.</p>
</div>
</footer>
</body>
</html>
```
#### Landing page Stylesheet
This will style the html page for it to be applealing.
```css
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alata&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Alata", sans-serif;
color: blue;
overflow-x: hidden;
}
h1 {
color: #fff;
font-size: 4rem;
font-weight: 100;
}
p {
font-size: 15px;
}
header {
background-image: url("./images/image-hero.jpg");
max-width: 100%;
height: 80vh;
}
.virtual-reality {
justify-content: center;
align-items: center;
}
.virtual-reality img {
display: block;
margin: 2rem auto;
height: 80vh;
width: 80vw;
}
nav {
display: flex;
flex-wrap: wrap;
width: 85%;
margin: 0rem auto;
}
.navbar {
display: flex;
width: 100%;
justify-content: space-between;
padding: 3rem 0;
}
.hamburger {
display: none;
}
h3 {
color: #fff;
}
ul {
display: flex;
gap: 2rem;
}
li {
list-style-type: none;
}
a {
font-family: inherit;
text-decoration: none;
color: #fff;
font-size: 15px;
padding-bottom: 0.7rem;
}
a:hover {
border-bottom: 3px solid #fff;
}
a.active {
border-bottom: 3px solid #fff;
}
.advert {
width: 50%;
display: flex;
margin-top: 3rem;
padding: 1rem;
text-align: left;
flex-wrap: wrap;
border: 1px solid #fff;
}
.advert h1 {
max-width: 100%;
}
section {
width: 85%;
position: relative;
display: flex;
margin: 3.5rem auto 7rem auto;
justify-content: space-between;
}
.interactive-img {
display: block;
}
.interactive-div {
position: absolute;
left: 55%;
background: #fff;
bottom: 0;
padding: 4rem 0 0 4rem;
max-width: 600px;
}
h3 {
letter-spacing: 3px;
font-weight: 100;
margin-bottom: 1rem;
color: #000;
font-size: 3rem;
}
section p {
font-size: 15px;
line-height: 1.5;
color: hsl(0, 0%, 55%);
}
article {
width: 85%;
margin: 1rem auto;
}
.img-div {
/* visibility: hidden; */
overflow: hidden;
}
.img-div img {
transform-origin: left;
}
img {
cursor: pointer;
max-width: 100%;
}
.label {
display: flex;
margin-bottom: 3rem;
justify-content: space-between;
}
.label h3 {
color: black;
font-size: 2.5rem;
}
article button {
cursor: pointer;
border: none;
padding: 0.1rem 3rem;
background-color: #000;
color: #fff;
letter-spacing: 2px;
}
.photos {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.photos img {
margin-bottom: 1rem;
}
.photos img:hover {
opacity: 0.5;
}
.img-box1,
.img-box2,
.img-box3,
.img-box4,
.img-box5,
.img-box6,
.img-box7,
.img-box8 {
position: relative;
}
.img-box1 p,
.img-box2 p,
.img-box3 p,
.img-box4 p,
.img-box5 p,
.img-box6 p,
.img-box7 p,
.img-box8 p {
position: absolute;
font-weight: 100;
padding: 5px;
left: 1rem;
width: 60%;
font-size: 2rem;
bottom: 2.5rem;
color: #fff;
}
footer {
background-color: #000;
padding: 2rem 0;
margin-top: 4rem;
}
.logos {
width: 85%;
margin: 1rem auto 1rem auto;
display: flex;
justify-content: space-between;
}
.logos h3 {
color: #fff;
align-items: center;
}
.icons img {
margin-left: 0.5rem;
padding-bottom: 5px;
}
.icons img:hover {
border-bottom: 3px solid #fff;
}
.bottom {
width: 85%;
justify-content: space-between;
display: flex;
margin: 0 auto;
}
footer p {
color: hsl(0, 0%, 55%);
}
#footer-list {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 600px) {
nav {
width: 100%;
}
.navbar {
margin: 0 1rem;
}
.hamburger {
display: flex;
}
.advert {
width: 85%;
margin: 0 auto;
justify-content: center;
}
header {
background-size: cover;
}
.navbar ul {
display: none;
}
.interactive-div {
width: 90%;
text-align: center;
position: relative;
left: 0;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
}
.label {
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.label h3 {
margin: 0 auto;
}
section {
width: 95%;
flex-direction: column;
}
article {
width: 95%;
justify-content: center;
}
.interactive-img {
width: 100%;
}
.photos {
margin: 0 auto;
flex-direction: column;
width: 100%;
}
.virtual-reality {
margin-bottom: 2rem;
}
.virtual-reality img {
height: 50vh;
}
.img-box1 img,
.img-box2 img,
.img-box3 img,
.img-box4 img,
.img-box5 img,
.img-box6 img,
.img-box7 img,
.img-box8 img {
max-width: 100%;
width: 100%;
height: 50vh;
margin: 1rem 0;
}
.bottom {
flex-direction: column;
align-items: center;
}
footer {
position: sticky;
height: 35vh;
}
#footer-list {
flex-direction: column;
margin: 0 auto;
gap: 0.5rem;
}
.logos {
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0.2rem auto;
}
}
@media screen and (max-width: 900px) {
.advert h1 {
font-size: 2.5rem;
}
}
```
### Animating the website with GSAP and ScrollTrigger
<em>Note that the CDNs for GSAP and ScrollTrigger are to be added using the script tag in the 'head' of the HTML file.
It would be impossible to create animations and trigger them on the scroll without initialization. <em>
```javascript
//Registering the scrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);
//Animating the advert div with GSAP
gsap.fromTo(
".advert",
{ xPercent: 30 },
{ duration: 3, xPercent: 0, ease: "bounce" }
);
//Animating the Section elements
gsap
.timeline()
.from(".img-div img", {
xPercent: -100,
duration: 1,
scrollTrigger: {
trigger: ".img-div",
start: "top center",
end: "bottom center",
scrub: true,
},
})
.fromTo(
".interactive-div",
{ yPercent: -50, scale: 0.5 },
{
opacity: 1,
yPercent: 0,
scale: 1,
scrollTrigger: {
trigger: ".interactive-div",
start: "top center",
end: "bottom center",
scrub: true,
},
}
);
```
From the above code snippet, the `scrollTrigger` plugin was firt registered to enable animations on the scroll.
A simple animation is created for the `.advert` class using `gsap.fromTo` .
The animation starts near the middle of the page `xPercent: 30` to the left `xPercent: 0`, bounces `ease: bounce` when it reaches the end.
The entire animation takes place in 3 seconds `duration: 3`.
Next, is a `timeline` created to control the following tweens as a whole.
The `img-div` image is animated from the left of its container using `xPercent:-100`. This doesn't yet animate on scroll, so the scrollTrigger property is added and the `trigger` targets the `img-div` class, the image is set to begin animating when the top of the image is scrolled to the center of the page and should end when the bottom reaches the center. The scrub is added to synchronize the progress of themhe animation on scroll. The same process is repeated for the `interactive-div` which contains text, the element is animated from the middle(50%) of its container to the bottom(0%), its `scale` increases from `0.5` to `1.0` and it takes the scrub property to ensure a smooth animation.
## Conclusion
Congratulations you have learnt how to build and animate any website. GSAP and scrollTrigger are the way to create a landing page.
Google Drive
Gist
Clipboard
Sign in with Wallet
