Horizontal scroll – GSAP ScrollTrigger
Horizontal scroll – GSAP ScrollTrigger
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="head fixed-top">
<div class="container-fluid bg-primary">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/symbol.svg" height="24px"> <span class="fw-bold">Meeny</span>.com</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="Mwrap">
<div class="panel bg-primary">Base</div>
<div class="panel bg-secondary">ONE</div>
<div class="panel bg-success">TWO</div>
<div class="panel bg-info">THREE</div>
<div class="panel bg-warning">FOUR</div>
<div class="panel bg-danger">FIVE</div>
</div>
<div class="text-center bg-primary h-100 row">
<div class="my-auto">
<h3>Horizontal scroll - GSAP ScrollTrigger</h3>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="main.js"></script>
</body>
</html>SCSS
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean");
$font-family-base: 'Oswald', sans-serif;
$primary: #fca311 !default;
$secondary: #1d3557 !default;
$success: #457b9d !default;
$info: #a8dadc !default;
// $warning: #f1faee !default;
// $danger: $red !default;
// $light: $gray-100 !default;
// $dark: $gray-900 !default;
@import "./node_modules/bootstrap/scss/bootstrap";
html, body, .Mwrap, .panel{
height: 100%;
}
body{
overflow-x: hidden;
overflow-y: scroll;
}
.Mwrap{
width: 600% !important;
display: flex;
flex-wrap: nowrap;
}
.panel{
width: 100%;
font-weight: 700;
font-size: 1.5em;
color: $white;
display: flex;
justify-content: center;
align-items: center;
}
Main.js
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".Mwrap",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
// base vertical scrolling on how wide the container is so it feels more natural.
end: () => "+=" + document.querySelector(".Mwrap").offsetWidth
}
});