├── Img └── bg_img.jpeg ├── README.md ├── script.js ├── index.html └── style.css /Img/bg_img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rajacharles/GSAP-Portfolio-Landing-Page-Transition-Animation/HEAD/Img/bg_img.jpeg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GSAP-Portfolio-Landing-Page-Transition-Animation 2 | 3 | I always wanted my simple web application to have GSAP fluid and smooth transitions between the pages and act like a Single Page Application (SPA). So, I encountered gsap which is a progressive enhancement library to create fluid and smooth transitions between your website’s pages. 4 | 5 | 6 | ![GSAP-Landing-Page-Transition-Animation](https://user-images.githubusercontent.com/82109268/154218550-595af3f4-e94d-484d-9290-da23c51b7e33.jpg) 7 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const navLink = document.querySelectorAll('.nav_link'); 2 | function linkAct() { 3 | navLink.forEach(n => n.classList.remove('active')); 4 | this.classList.add('active'); 5 | } 6 | 7 | navLink.forEach(n => n.addEventListener('click', linkAct)); 8 | 9 | //Left-Menu 10 | TweenMax.from('.left_menu', 1, { 11 | delay:2.5, 12 | opacity:0, 13 | x:-50, 14 | ease:Expo.easeInOut 15 | }) 16 | 17 | //Nav - Links 18 | TweenMax.from('.nav_links_content ul li', 1, { 19 | delay:3.5, 20 | opacity:0, 21 | x:100, 22 | ease:Expo.easeInOut 23 | }, 0.08) 24 | 25 | //Search Icon 26 | TweenMax.from('.search_icon', 1, { 27 | delay:2.5, 28 | opacity:0, 29 | x:-50, 30 | ease:Expo.easeInOut 31 | }) 32 | 33 | //Large Text 34 | TweenMax.from('.larger_text_content', 1, { 35 | delay:4, 36 | opacity:0, 37 | y:-100, 38 | ease:Expo.easeInOut 39 | }) 40 | 41 | //Description Content 42 | TweenMax.from('.desc_content', 1, { 43 | delay:4.5, 44 | opacity:0, 45 | x:100, 46 | ease:Expo.easeInOut 47 | }) 48 | 49 | //Overlay 50 | TweenMax.to('.overlay', 2, { 51 | delay:1, 52 | top:"-100%", 53 | ease:Expo.easeInOut 54 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GSAP Portfolio Landing Page Transition Animation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | <!--! Atomicons Free 1.00 by @atisalab License - https://atomicons.com/license/ (Icons: CC BY 4.0) Copyright 2021 Atomicons --> 19 |
20 | 21 | 22 |
23 | 24 |
25 |
26 | 31 |
32 | 33 | 34 | 47 |
48 | 49 | 50 |
51 |
52 |
53 | 56 |
57 |
58 | 64 |
65 |
66 |
67 | 68 |
69 |
70 |

photo
graphy

71 |
72 |
73 |
74 | 03 75 | fashion. 76 |
77 | scroll 78 |
79 |
80 |
81 |
82 | 83 |
84 |

Fashion designers are responsible for creating looks for individual garments, involving shape, color, fabric, trimming, and more

85 |
86 | 01. 87 | Fashion 88 |
89 |
90 | 02. 91 | modeling 92 |
93 |
fashion.
94 |
03/03
95 |
96 | 97 | 98 |
99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /********* Root ********/ 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | /********* Body ********/ 9 | body { 10 | font-family: "Lato", sans-serif; 11 | overflow: hidden; 12 | } 13 | 14 | /********* Reset ********/ 15 | button { 16 | background-color: transparent; 17 | border: none; 18 | } 19 | 20 | button:focus{ 21 | outline: none; 22 | } 23 | 24 | /********* Wrapper ********/ 25 | .wrapper{ 26 | width: 100%; 27 | height: 100vh; 28 | background: url(Img/bg_img.jpeg); 29 | background-size: cover; 30 | background-position: center; 31 | display: flex; 32 | } 33 | 34 | /********* Left Menu ********/ 35 | .left_menu { 36 | width: 100px; 37 | height: 100%; 38 | display: flex; 39 | background-color: transparent; 40 | flex-direction: column; 41 | justify-content: space-between; 42 | } 43 | 44 | 45 | /********* Logo ********/ 46 | .logo{ 47 | background-color: #204b85; 48 | width: 100%; 49 | height: 100px; 50 | display: flex; 51 | align-items: center; 52 | justify-content: center; 53 | } 54 | 55 | /********* Social Icons ********/ 56 | .social_icons_list{ 57 | width: 100%; 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | justify-content: center; 62 | list-style-type: none; 63 | padding: 10px; 64 | } 65 | 66 | .social_icons_list_item { 67 | margin-bottom: 2rem; 68 | cursor: pointer; 69 | } 70 | 71 | .social_icons_list_item i { 72 | font-size: 14px; 73 | } 74 | 75 | .social_icons_list_item.active { 76 | width: 35px; 77 | height: 35px; 78 | display: flex; 79 | align-items: center; 80 | justify-content: center; 81 | border: 2px solid #57392a; 82 | border-radius: 50%; 83 | padding-top: 5px; 84 | } 85 | 86 | .icon{ 87 | font-weight: 400; 88 | color: #204b85; 89 | } 90 | 91 | .icon:hover{ 92 | color: #57392a; 93 | } 94 | 95 | .nav{ 96 | width: 100%; 97 | height: 100px; 98 | } 99 | 100 | .nav__content { 101 | width: 100%; 102 | height: 100%; 103 | display: flex; 104 | align-items: center; 105 | justify-content: space-between; 106 | padding: 0 30px; 107 | } 108 | 109 | .nav_link_list { 110 | display: flex; 111 | list-style-type: none; 112 | cursor: pointer; 113 | } 114 | 115 | .nav_link_list li { 116 | font-weight: 600; 117 | padding: 1.2rem; 118 | } 119 | 120 | .nav_link { 121 | text-decoration: none; 122 | text-transform: uppercase; 123 | font-size: 14px; 124 | letter-spacing: 0.5px; 125 | color: #472717; 126 | } 127 | 128 | .nav_link.active { 129 | border-top: 2px solid #204b85; 130 | padding-top: 7px; 131 | color: #57392a; 132 | } 133 | 134 | .nav_link:hover { 135 | color: #57392a; 136 | } 137 | 138 | .larger_text_content { 139 | position: absolute; 140 | left: 10%; 141 | top: 28%; 142 | } 143 | 144 | .large_text{ 145 | font-family: "Lato", sans-serif; 146 | font-size: 25px; 147 | text-transform: uppercase; 148 | letter-spacing: 1px; 149 | line-height: 1; 150 | color: #57392a; 151 | } 152 | 153 | .blue_box { 154 | background-color: #204b85; 155 | width: 180px; 156 | height: 160px; 157 | margin-top: 1rem; 158 | padding: 2rem; 159 | } 160 | 161 | .blue_box_content{ 162 | width: 100%; 163 | height: 100%; 164 | display: flex; 165 | justify-content: center; 166 | flex-direction: column; 167 | } 168 | 169 | .blue_box_content > span:nth-child(1) { 170 | font-size: 12px; 171 | background-color: #fff; 172 | width: 30px; 173 | height: 30px; 174 | color: #204b85; 175 | border-radius: 50px; 176 | text-align: center; 177 | margin-bottom: 5px; 178 | } 179 | 180 | .blue_box_content > span:nth-child(2) { 181 | font-size: 28px; 182 | color: rgb(243, 243, 243); 183 | text-transform: capitalize; 184 | margin-bottom: 4px; 185 | } 186 | 187 | .see_photos { 188 | font-size: 12px; 189 | color: #fff; 190 | text-transform: capitalize; 191 | letter-spacing: 0.5px; 192 | } 193 | 194 | .see_photos::before { 195 | display: inline-block; 196 | content: ""; 197 | border-top: 1.9px solid rgb(255, 255, 255); 198 | width: 25px; 199 | margin: 0 10px 0 0; 200 | transform: translateY(-3px); 201 | } 202 | 203 | .desc_content{ 204 | position: absolute; 205 | width: 300px; 206 | height: 400px; 207 | top: 30%; 208 | right: 5%; 209 | padding: 1rem; 210 | display: flex; 211 | flex-direction: column; 212 | justify-content: space-between; 213 | } 214 | 215 | .desc_content > p { 216 | font-family: "Lato", sans-serif; 217 | width: 230px; 218 | color: #57392a; 219 | font-size: 14px; 220 | font-weight: 600; 221 | line-height: 24px; 222 | } 223 | 224 | .desc_content > p > span { 225 | color: #204b85; 226 | } 227 | 228 | .fashion, .modelings { 229 | display: flex; 230 | flex-direction: column; 231 | } 232 | 233 | .fashion > span:nth-child(1), .modelings > span:nth-child(1) { 234 | color: #204b85; 235 | margin-bottom: 7px; 236 | font-size: 14px; 237 | } 238 | 239 | .fashion > span:nth-child(2), .modelings > span:nth-child(2) { 240 | font-size: 15px; 241 | font-weight: 600; 242 | color: #57392a; 243 | text-transform: capitalize; 244 | letter-spacing: 0.9px; 245 | } 246 | 247 | .fashion_text { 248 | font-size: 20px; 249 | font-weight: 600; 250 | color: #57392a; 251 | text-transform: capitalize; 252 | letter-spacing: 0.7px; 253 | } 254 | 255 | .fashion_text::before { 256 | display: inline-block; 257 | content: ""; 258 | width: 35px; 259 | border-top: 2px solid #204b85; 260 | transform: translateX(-10px) translateY(-5px); 261 | padding-right: 10px; 262 | } 263 | 264 | .slide { 265 | letter-spacing: 4px; 266 | } 267 | 268 | .slide > span:nth-child(1) { 269 | color: #ca4c48; 270 | } 271 | 272 | .slide > span:nth-child(2) { 273 | color: #204b85; 274 | font-size: 13px; 275 | } 276 | 277 | .overlay { 278 | position: absolute; 279 | width: 100%; 280 | height: 100vh; 281 | background: rgb(0, 0, 0); 282 | z-index: 1; 283 | background: linear-gradient(90deg,#eeb486 50%, #073776 50%, #204b85 100%); 284 | top: 0%; 285 | display: flex; 286 | flex-direction: column; 287 | justify-content: center; 288 | align-items: center; 289 | } --------------------------------------------------------------------------------