How to create Scrolling Transform Effect Website

HTML Templates | December 1, 2020

This tutorial blog to learn how to create smooth scrolling transform effect with GreenSock scrolltrigger plugin.

Video Tutorial of "How to create Scrolling Transform Effect in Website"

This tutorial video to learn how to create smooth scrolling transform effect in JavaScript.

How to create Scrolling Transform Effect in Website [Source Code]

This source code can help you to create Scrolling Transform Effect in your Website. You can use your own images for this project.

GreenSock scrolltrigger plugin source.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<header>
		<div class="container">
			<a href="#" class="logo">LOGO</a>
			<ul class="main-nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
	</header>
	<div class="section cl1">
		<div class="container text-center">
			<h1>Welcome</h1>
			<p>consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div id="scroll_section">
		<div class="section cl2">
			<div class="container ">
				<div class="row">
					<div class="col-md-8">
						<h2>About Us</h2>
						<p>consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>
					</div>
					<div class="col-md-4">
						<img src="images/about.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="section cl3">
			<div class="container text-center">
				<h2>Services</h2>
				<div class="row">
					<div class="col-md-4 text-center">
						<h3>Service1</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
					</div>
					<div class="col-md-4 text-center">
						<h3>Service2</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
					</div>
					<div class="col-md-4 text-center">
						<h3>Service3</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
					</div>
				</div>
			</div>
		</div>
		<div class="section cl4">
			<div class="container text-center">
				<h2>Portfolio</h2>
				<div class="row">
					<div class="col-md-4">
						<div class="portfolio-box">
							<img src="images/pic1.jpg" alt="">
						</div>
					</div>
					<div class="col-md-4">
						<div class="portfolio-box">
							<img src="images/pic2.jpg" alt="">
						</div>
					</div>
					<div class="col-md-4">
						<div class="portfolio-box">
							<img src="images/pic3.jpg" alt="">
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="section cl5">
			<div class="container text-center">
				<h2>Testimonial</h2>
				<div class="row">
					<div class="col-md-6">
						<h3>Testimonial 1</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua.  </p>
					</div>
					<div class="col-md-6">
						<h3>Testimonial 2</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="section cl6">
			<div class="container text-center">
				<h2>Contact Us</h2>
				<div class="row">
					<div class="col-md-6">
						<input type="text" name="" placeholder="First Name">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Last Name">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Email">
					</div>
					<div class="col-md-6">
						<input type="text" name="" placeholder="Phone">
					</div>
					<div class="col-md-12">
						<textarea name="" placeholder="Message">
					</div>
					<div class="col-md-12">
						<input type="Submit" name="" value="submit">
					</div>
				</div>
			</div>
		</div>
	</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js"></script>
<!-- <script src="js/custom.js"></script> -->
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: "Montserrat",sans-serif;
	font-size: 16px;
	margin: 0;
	background: #fff;
	min-height: 100vh;
	background:#000;
	position: relative;
}

img{
	max-width: 100%;
}
h1,h2{
	font-size: 46px;
	margin-bottom: 30px;
}
header{
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	z-index: 10;
	padding: 20px 0;
	backdrop-filter:blur(30px);
	
}
.container{
	max-width: 1100px;
	margin:0 auto;
	width: 100%;
	
}
header .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo{
	font-size: 60px;
	color: #fff;
	text-decoration: none;
	font-weight: 900;
}
.main-nav{
	padding: 0;
	margin: 0;
	list-style: none;
}
.main-nav li{
	display: inline-block;
	margin-left: 20px;
}
.main-nav li a{
	color: #fff;
	text-decoration: none;
	font-size: 20px;
}
.section{
	background:#fff;
	padding: 20px;
	width: 100%;
	height: 100vh;
	overflow: auto;
	color: white;
	font-size: 24px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
#scroll_section{
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.section.cl1{ background-color: #1abc9c ; position: static;}
.section.cl2{ background-color: #2ecc71 ;}
.section.cl3{ background-color: #3498db ;}
.section.cl4{ background-color: #9b59b6 ;}
.section.cl5{ background-color: #f1c40f ;}
.section.cl6{ background-color: #e74c3c ;}
.portfolio-box{
	border:2px solid;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

input:not([type="submit"]),textarea{
	width: 100%;
	padding: 10px;
	font-size: 16px;
	margin-bottom: 20px;
	outline: 0;
}
textarea{
	height: 100px;
}
input[type="submit"]{
	background:black;
	padding: 10px;
	color: #fff;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
}
input[type="submit"]:hover{
	opacity: 0.7;
}

JavaScript Code

Copy

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline()
tl.from(".cl3",{xPercent:-100})
.from(".cl4",{xPercent:100})
.from(".cl5",{yPercent:-100})
.from(".cl6",{yPercent:100});



ScrollTrigger.create({
    animation:tl,
    trigger: "#scroll_section",
    start: "top top",
    end: "+=2000",
    scrub:true,
    pin:true,
});

for( i = 0;i<=3; i++) {
	console.log(i)
}

How to create Scrolling Transform Effect Website

Video Tutorial of "How to create Scrolling Transform Effect in Website"

How to create Scrolling Transform Effect in Website [Source Code]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS