├── images
    ├── image-one.jpg
    ├── image-six.jpg
    ├── image-two.jpg
    ├── image-five.jpg
    ├── image-four.jpg
    ├── image-seven.jpg
    └── image-three.jpg
├── styles.css
└── index.html


/images/image-one.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-one.jpg


--------------------------------------------------------------------------------
/images/image-six.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-six.jpg


--------------------------------------------------------------------------------
/images/image-two.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-two.jpg


--------------------------------------------------------------------------------
/images/image-five.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-five.jpg


--------------------------------------------------------------------------------
/images/image-four.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-four.jpg


--------------------------------------------------------------------------------
/images/image-seven.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-seven.jpg


--------------------------------------------------------------------------------
/images/image-three.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/website-reveal-animation-using-tweenmax/HEAD/images/image-three.jpg


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   background: #e3dcc7;
  9 | }
 10 | 
 11 | .navbar {
 12 |   position: fixed;
 13 |   top: 0;
 14 |   width: 100%;
 15 |   height: 100px;
 16 |   padding: 0 40px;
 17 |   display: flex;
 18 |   justify-content: space-between;
 19 |   font-family: "Kobe", Helvetica, sans-serif;
 20 |   font-weight: 400;
 21 |   text-transform: uppercase;
 22 |   line-height: 100px;
 23 |   color: #6d6458;
 24 | }
 25 | 
 26 | .site-menu {
 27 |   display: flex;
 28 | }
 29 | 
 30 | .menu-item {
 31 |   margin-left: 60px;
 32 | }
 33 | 
 34 | .container {
 35 |   position: absolute;
 36 |   top: 50%;
 37 |   left: 50%;
 38 |   transform: translate(-50%, -50%);
 39 |   /* border: 1px solid red; */
 40 |   width: 400px;
 41 |   height: 300px;
 42 | }
 43 | 
 44 | .block {
 45 |   position: absolute;
 46 |   width: 100%;
 47 |   height: 100%;
 48 | }
 49 | 
 50 | .b-1 {
 51 |   background: url("./images/image-one.jpg") 50% 50% no-repeat;
 52 |   background-size: cover;
 53 | }
 54 | 
 55 | .b-2 {
 56 |   background: url("./images/image-two.jpg") 50% 50% no-repeat;
 57 |   background-size: cover;
 58 | }
 59 | 
 60 | .b-3 {
 61 |   background: url("./images/image-three.jpg") 50% 50% no-repeat;
 62 |   background-size: cover;
 63 | }
 64 | 
 65 | .b-4 {
 66 |   background: url("./images/image-four.jpg") 50% 50% no-repeat;
 67 |   background-size: cover;
 68 | }
 69 | 
 70 | .b-5 {
 71 |   background: url("./images/image-five.jpg") 50% 50% no-repeat;
 72 |   background-size: cover;
 73 | }
 74 | 
 75 | .b-6 {
 76 |   background: url("./images/image-six.jpg") 50% 50% no-repeat;
 77 |   background-size: cover;
 78 | }
 79 | 
 80 | .b-7 {
 81 |   background: url("./images/image-seven.jpg") 50% 50% no-repeat;
 82 |   background-size: cover;
 83 | }
 84 | 
 85 | .overlay {
 86 |   position: absolute;
 87 |   width: 100%;
 88 |   height: 50vh;
 89 |   bottom: -10rem;
 90 |   background: #e3dcc7;
 91 | }
 92 | 
 93 | .title {
 94 |   margin-top: 20rem;
 95 |   text-align: center;
 96 |   font-family: "Canopee";
 97 |   font-size: 10em;
 98 |   color: #393833;
 99 |   overflow: hidden;
100 | }
101 | 
102 | .title .letter {
103 |   display: inline-block;
104 |   line-height: 1em;
105 | }
106 | 


--------------------------------------------------------------------------------
/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>CG IMAGE STACK PRE-LOADER ANIMATION</title>
 8 |     <link rel="stylesheet" href="styles.css" />
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
10 |   </head>
11 |   <body>
12 |     <div class="navbar">
13 |       <div class="site-info">elevated</div>
14 |       <div class="site-menu">
15 |         <div class="menu-item">projects</div>
16 |         <div class="menu-item">about</div>
17 |         <div class="menu-item">contact</div>
18 |       </div>
19 |     </div>
20 |     <div class="container">
21 |       <div class="block b-1"></div>
22 |       <div class="block b-2"></div>
23 |       <div class="block b-3"></div>
24 |       <div class="block b-4"></div>
25 |       <div class="block b-5"></div>
26 |       <div class="block b-6"></div>
27 |       <div class="block b-7"></div>
28 |     </div>
29 |     <div class="overlay"></div>
30 |     <p class="title">Reach The Fullest</p>
31 | 
32 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
33 |     <script>
34 |       // Wrap every letter in a span
35 |       var textWrapper = document.querySelector(".title");
36 |       textWrapper.innerHTML = textWrapper.textContent.replace(
37 |         /\S/g,
38 |         "<span class='letter'>$&</span>"
39 |       );
40 | 
41 |       anime.timeline().add({
42 |         targets: ".title .letter",
43 |         translateY: [-200, 0],
44 |         easing: "easeOutExpo",
45 |         duration: 1400,
46 |         delay: (el, i) => 6500 + 30 * i,
47 |       });
48 | 
49 |       TweenMax.staggerFrom(
50 |         ".container > .block",
51 |         2,
52 |         {
53 |           y: "110%",
54 |           ease: Expo.easeInOut,
55 |           delay: 1,
56 |         },
57 |         0.4
58 |       );
59 |       TweenMax.to(".overlay", 0.5, {
60 |         y: "100%",
61 |         ease: Expo.easeInOut,
62 |         delay: 5.2,
63 |       });
64 | 
65 |       TweenMax.to(".container", 2, {
66 |         scale: "2",
67 |         y: "90%",
68 |         ease: Expo.easeInOut,
69 |         delay: 5.5,
70 |       });
71 | 
72 |       TweenMax.staggerFrom(
73 |         ".navbar > div",
74 |         1.6,
75 |         {
76 |           opacity: 0,
77 |           y: -100,
78 |           ease: Expo.easeInOut,
79 |           delay: 6,
80 |         },
81 |         0.08
82 |       );
83 |       TweenMax.staggerFrom(
84 |         ".site-menu > div",
85 |         1,
86 |         {
87 |           opacity: 0,
88 |           y: -100,
89 |           ease: Power2.easeOut,
90 |           delay: 6.5,
91 |         },
92 |         0.1
93 |       );
94 |     </script>
95 |   </body>
96 | </html>
97 | 


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