├── css
    └── styles.css
├── images
    ├── img-1.png
    ├── img-2.png
    ├── img-3.png
    ├── img-4.png
    ├── img-5.png
    ├── img-6.png
    ├── img-7.png
    └── img-8.png
└── index.html


/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | html,
  8 | body {
  9 | 	width: 100%;
 10 | 	height: 100vh;
 11 | }
 12 | 
 13 | h1 {
 14 | 	position: absolute;
 15 | 	top: 50%;
 16 | 	left: 50%;
 17 | 	transform: translate(-50%, -50%);
 18 | 	font-size: 12vw;
 19 | 	font-family: "Reval";
 20 | }
 21 | 
 22 | .header .letter {
 23 | 	display: inline-block;
 24 | 	line-height: 1em;
 25 | }
 26 | 
 27 | .overlay {
 28 | 	position: fixed;
 29 | 	width: 100%;
 30 | 	height: 100vh;
 31 | 	background-color: #0f0f0f;
 32 | }
 33 | 
 34 | .images {
 35 | 	position: absolute;
 36 | 	top: 50%;
 37 | 	left: 50%;
 38 | 	transform: translate(-50%, -50%);
 39 | 	display: flex;
 40 | }
 41 | 
 42 | .img {
 43 | 	width: 140px;
 44 | 	height: 180px;
 45 | 	background: darkblue;
 46 | 	filter: grayscale(1);
 47 | 	opacity: 0.6;
 48 | }
 49 | 
 50 | .img-1 {
 51 | 	transform: scale(1);
 52 | 	background: url(/images/img-1.png) 50% 50% no-repeat;
 53 | 	background-size: cover;
 54 | }
 55 | 
 56 | .img-2 {
 57 | 	transform: scale(1.4);
 58 | 	background: url(/images/img-2.png) 50% 50% no-repeat;
 59 | 	background-size: cover;
 60 | }
 61 | 
 62 | .img-3 {
 63 | 	transform: scale(1.2);
 64 | 	background: url(/images/img-3.png) 50% 50% no-repeat;
 65 | 	background-size: cover;
 66 | }
 67 | 
 68 | .img-4 {
 69 | 	transform: scale(0.9);
 70 | 	background: url(/images/img-4.png) 50% 50% no-repeat;
 71 | 	background-size: cover;
 72 | }
 73 | 
 74 | .img-5 {
 75 | 	transform: scale(1.2);
 76 | 	background: url(/images/img-5.png) 50% 50% no-repeat;
 77 | 	background-size: cover;
 78 | }
 79 | 
 80 | .img-6 {
 81 | 	transform: scale(1);
 82 | 	background: url(/images/img-6.png) 50% 50% no-repeat;
 83 | 	background-size: cover;
 84 | }
 85 | 
 86 | .img-7 {
 87 | 	transform: scale(1.1);
 88 | 	background: url(/images/img-7.png) 50% 50% no-repeat;
 89 | 	background-size: cover;
 90 | }
 91 | 
 92 | .img-8 {
 93 | 	transform: scale(0.9);
 94 | 	background: url(/images/img-8.png) 50% 50% no-repeat;
 95 | 	background-size: cover;
 96 | }
 97 | 
 98 | .navbar {
 99 | 	position: absolute;
100 | 	bottom: 40px;
101 | 	width: 100%;
102 | 	margin: 20px auto;
103 | 	display: flex;
104 | 	justify-content: space-around;
105 | 	color: #fff;
106 | 	font-family: "Neue Montreal", Arial, Helvetica, sans-serif;
107 | 	text-transform: uppercase;
108 | }
109 | 


--------------------------------------------------------------------------------
/images/img-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-1.png


--------------------------------------------------------------------------------
/images/img-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-2.png


--------------------------------------------------------------------------------
/images/img-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-3.png


--------------------------------------------------------------------------------
/images/img-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-4.png


--------------------------------------------------------------------------------
/images/img-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-5.png


--------------------------------------------------------------------------------
/images/img-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-6.png


--------------------------------------------------------------------------------
/images/img-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-7.png


--------------------------------------------------------------------------------
/images/img-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/page-reveal-animation-using-greensock/92a770c68373de3cf5c5c0280f40026e87e17f2e/images/img-8.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 | 		<title>ITSALE MONTANA</title>
  8 | 		<link rel="stylesheet" href="css/styles.css" />
  9 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
 10 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
 11 | 	</head>
 12 | 	<body>
 13 | 		<div class="container">
 14 | 			<h1 class="header">montana</h1>
 15 | 			<div class="overlay">
 16 | 				<div class="images">
 17 | 					<div class="img img-1"></div>
 18 | 					<div class="img img-2"></div>
 19 | 					<div class="img img-3"></div>
 20 | 					<div class="img img-4"></div>
 21 | 					<div class="img img-5"></div>
 22 | 					<div class="img img-6"></div>
 23 | 					<div class="img img-7"></div>
 24 | 					<div class="img img-8"></div>
 25 | 				</div>
 26 | 				<div class="navbar">
 27 | 					<div class="site-title">itsale montana</div>
 28 | 					<div class="site-icon">✴</div>
 29 | 					<div class="site-type">clothing brand</div>
 30 | 				</div>
 31 | 			</div>
 32 | 		</div>
 33 | 		<script>
 34 | 			TweenMax.staggerFrom(
 35 | 				".navbar > div",
 36 | 				0.8,
 37 | 				{
 38 | 					x: "-80",
 39 | 					opacity: 0,
 40 | 					ease: Power3.easeOut,
 41 | 					delay: 1,
 42 | 				},
 43 | 				0.08
 44 | 			);
 45 | 
 46 | 			TweenMax.staggerFrom(
 47 | 				".images > div",
 48 | 				0.8,
 49 | 				{
 50 | 					x: "-80",
 51 | 					opacity: 0,
 52 | 					ease: Power3.easeOut,
 53 | 					delay: 1,
 54 | 				},
 55 | 				0.08
 56 | 			);
 57 | 
 58 | 			TweenMax.staggerTo(
 59 | 				".navbar > div",
 60 | 				0.8,
 61 | 				{
 62 | 					x: "80",
 63 | 					opacity: 0,
 64 | 					ease: Power3.easeOut,
 65 | 					delay: 4,
 66 | 				},
 67 | 				0.04
 68 | 			);
 69 | 
 70 | 			TweenMax.staggerTo(
 71 | 				".images > div",
 72 | 				0.4,
 73 | 				{
 74 | 					scale: "0",
 75 | 					opacity: 0,
 76 | 					ease: Power3.easeOut,
 77 | 					delay: 4,
 78 | 				},
 79 | 				0.04
 80 | 			);
 81 | 
 82 | 			TweenMax.to(".overlay", 1.2, {
 83 | 				top: "-100%",
 84 | 				ease: Expo.easeOut,
 85 | 				delay: 5,
 86 | 			});
 87 | 
 88 | 			var textWrapper = document.querySelector(".header");
 89 | 			textWrapper.innerHTML = textWrapper.textContent.replace(
 90 | 				/\S/g,
 91 | 				"<span class='letter'>$&</span>"
 92 | 			);
 93 | 
 94 | 			anime.timeline().add({
 95 | 				targets: ".header .letter",
 96 | 				translateY: [100, 0],
 97 | 				translateZ: 0,
 98 | 				easing: "easeOutExpo",
 99 | 				duration: 2000,
100 | 				delay: (el, i) => 4800 + 40 * i,
101 | 			});
102 | 		</script>
103 | 	</body>
104 | </html>
105 | 


--------------------------------------------------------------------------------