├── img-left.jpeg ├── img-right.jpeg ├── index.html ├── script.js └── styles.css /img-left.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Animated-Landing-Page-Using-TweenMax/99d78a9dd88c74811219bbf32e4b02b0e9fb0143/img-left.jpeg -------------------------------------------------------------------------------- /img-right.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Animated-Landing-Page-Using-TweenMax/99d78a9dd88c74811219bbf32e4b02b0e9fb0143/img-right.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Landing Page Design - Codegrid 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 |

36 |

Selected

37 |

38 |

39 | 40 |

41 |

selected

42 |

43 |

en | fr

44 | 45 |

46 | Essence
47 | Alternative Story 48 |

49 |

50 |

View Project

51 |

52 | /Collaborations 53 |

54 | 73 |

74 |

75 |

76 | One creative studio that will make you think. 77 |

78 |

79 | New talents 80 |

81 |

82 |

83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var textWrapper = document.querySelector(".intro-title"); 2 | textWrapper.innerHTML = textWrapper.textContent.replace( 3 | /([^\x00-\x80]|\w)/g, 4 | "$&" 5 | ); 6 | 7 | anime 8 | .timeline({ loop: false }) 9 | .add({ 10 | targets: ".intro-title .letter", 11 | translateX: [140, 0], 12 | translateZ: 0, 13 | opacity: [0, 1], 14 | easing: "easeOutExpo", 15 | duration: 1400, 16 | delay: function(el, i) { 17 | return 500 + 50 * i; 18 | } 19 | }) 20 | .add({ 21 | targets: ".intro-title .letter", 22 | translateX: [0, -140], 23 | opacity: [1, 0], 24 | easing: "easeInExpo", 25 | duration: 1200, 26 | delay: function(el, i) { 27 | return 700 + 50 * i; 28 | } 29 | }); 30 | 31 | TweenMax.to(".loader", 2.2, { 32 | delay: 5, 33 | top: "-100%", 34 | ease: Expo.easeInOut 35 | }); 36 | 37 | TweenMax.from(".logo", 2, { 38 | delay: 6, 39 | y: 10, 40 | opacity: 0, 41 | ease: Expo.easeInOut 42 | }); 43 | 44 | TweenMax.from(".lang", 2, { 45 | delay: 6.1, 46 | y: 10, 47 | opacity: 0, 48 | ease: Expo.easeInOut 49 | }); 50 | 51 | TweenMax.from(".left-img-cap", 2, { 52 | delay: 6.2, 53 | y: 10, 54 | opacity: 0, 55 | ease: Expo.easeInOut 56 | }); 57 | 58 | TweenMax.staggerFrom( 59 | ".social-media ul li", 60 | 2, 61 | { 62 | delay: 6.3, 63 | opacity: 0, 64 | y: 20, 65 | ease: Power3.easeInOut 66 | }, 67 | 0.1 68 | ); 69 | 70 | TweenMax.from(".left-bottom-text", 2, { 71 | delay: 6.4, 72 | y: 10, 73 | opacity: 0, 74 | ease: Expo.easeInOut 75 | }); 76 | 77 | TweenMax.from(".left-img-btn", 2, { 78 | delay: 6.4, 79 | scale: 0, 80 | ease: Expo.easeInOut 81 | }); 82 | 83 | TweenMax.from(".right-bottom-text", 2, { 84 | delay: 6.7, 85 | y: 10, 86 | opacity: 0, 87 | ease: Expo.easeInOut 88 | }); 89 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | width: 100%; 6 | } 7 | 8 | .container { 9 | width: 100%; 10 | height: 100vh; 11 | background: #121212; 12 | } 13 | 14 | .logo, 15 | .lang { 16 | position: absolute; 17 | text-transform: uppercase; 18 | font-size: 20px; 19 | margin: 1.2em; 20 | } 21 | 22 | .logo { 23 | color: white; 24 | font-family: "Cinzel"; 25 | } 26 | 27 | .lang { 28 | right: 0; 29 | font-family: Arial; 30 | color: #646464; 31 | } 32 | 33 | .container-left { 34 | position: absolute; 35 | width: 50%; 36 | height: 100vh; 37 | } 38 | 39 | .container-right { 40 | position: absolute; 41 | width: 50%; 42 | height: 100vh; 43 | left: 50%; 44 | background: url(img-right.jpeg) no-repeat 50% 50%; 45 | background-size: 110%; 46 | animation: animatedBackground1 6s cubic-bezier(0.19, 1, 0.22, 1); 47 | animation-delay: 5s; 48 | } 49 | 50 | @keyframes animatedBackground1 { 51 | from { 52 | background-size: 460%; 53 | } 54 | to { 55 | background-size: 110%; 56 | } 57 | } 58 | 59 | .container-left-img { 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | transform: translate(-50%, -50%); 64 | width: 300px; 65 | height: 400px; 66 | background: url(img-left.jpeg) no-repeat 50% 50%; 67 | background-size: 210%; 68 | animation: animatedBackground2 6s cubic-bezier(0.19, 1, 0.22, 1); 69 | animation-delay: 5s; 70 | } 71 | 72 | @keyframes animatedBackground2 { 73 | from { 74 | background-size: 760%; 75 | } 76 | to { 77 | background-size: 210%; 78 | } 79 | } 80 | 81 | .left-img-cap { 82 | position: absolute; 83 | top: 20%; 84 | left: 50%; 85 | transform: translate(-50%, -50%); 86 | color: white; 87 | text-align: center; 88 | font-family: "Arial"; 89 | text-transform: uppercase; 90 | color: #646464; 91 | line-height: 24px; 92 | } 93 | 94 | .left-img-cap span { 95 | font-style: italic; 96 | } 97 | 98 | .left-img-btn { 99 | position: absolute; 100 | top: 40%; 101 | left: 70%; 102 | transform: translate(-50%, -50%); 103 | width: 160px; 104 | height: 160px; 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | border-radius: 100%; 109 | text-align: center; 110 | text-transform: uppercase; 111 | font-family: "Cinzel"; 112 | background: #8f8776; 113 | } 114 | 115 | .social-media { 116 | position: absolute; 117 | bottom: 0; 118 | } 119 | 120 | .social-media ul { 121 | list-style: none; 122 | padding: 0; 123 | margin: 2em; 124 | } 125 | 126 | .social-media ul li { 127 | padding: 10px 0; 128 | } 129 | 130 | .social-media ul li a { 131 | color: #8f8776; 132 | } 133 | 134 | .left-bottom-text { 135 | position: absolute; 136 | color: grey; 137 | font-size: 48px; 138 | font-family: "Cinzel"; 139 | text-transform: uppercase; 140 | font-weight: 400; 141 | padding: 20px; 142 | bottom: 0; 143 | right: 0; 144 | } 145 | 146 | .right-upper-text { 147 | position: absolute; 148 | color: red; 149 | font-size: 48px; 150 | font-family: "Arial"; 151 | text-transform: uppercase; 152 | font-weight: lighter; 153 | padding: 18px; 154 | opacity: 0; 155 | animation: blinker 1s linear infinite; 156 | animation-delay: 10s; 157 | } 158 | 159 | @keyframes blinker { 160 | 50% { 161 | opacity: 1; 162 | } 163 | } 164 | 165 | .right-upper-text span { 166 | font-style: italic; 167 | } 168 | 169 | .right-bottom-text { 170 | position: absolute; 171 | color: white; 172 | font-size: 48px; 173 | font-family: "Arial"; 174 | text-decoration: underline; 175 | text-transform: uppercase; 176 | font-weight: lighter; 177 | padding: 26px; 178 | bottom: 0; 179 | } 180 | 181 | @media (max-width: 990px) { 182 | .container-left, 183 | .container-right { 184 | width: 100%; 185 | height: 100vh; 186 | } 187 | 188 | .container-right { 189 | top: 100vh; 190 | left: 0; 191 | } 192 | 193 | .left-img-btn, 194 | .social-media { 195 | display: none; 196 | } 197 | } 198 | 199 | .loader { 200 | position: fixed; 201 | width: 100%; 202 | height: 100vh; 203 | background: #000; 204 | z-index: 2; 205 | overflow: hidden; 206 | } 207 | 208 | .loader marquee { 209 | opacity: 0.2; 210 | text-transform: uppercase; 211 | line-height: 180px; 212 | margin: 0; 213 | padding: 0; 214 | color: #646464; 215 | font-size: 200px; 216 | font-family: "Cinzel"; 217 | } 218 | 219 | .loader .intro { 220 | position: absolute; 221 | top: 50%; 222 | left: 50%; 223 | transform: translate(-50%, -50%); 224 | text-align: center; 225 | } 226 | 227 | .loader .intro h1 { 228 | font-size: 124px; 229 | text-transform: uppercase; 230 | font-weight: 200; 231 | color: #fff; 232 | font-family: "Cinzel"; 233 | } 234 | 235 | .intro-title .letter { 236 | display: inline-block; 237 | line-height: 1em; 238 | } 239 | --------------------------------------------------------------------------------