├── img.jpg ├── index.html └── style.css /img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taimoorshahzada/Text-Reveal-Animation-on-scroll-using-GSAP-ScrollTrigger-Plugin-and-Smooth-Scrollbar/e4c80475a8ae200ad923c3ec58a84b4832b3cbfe/img.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Text Reveal Animation

16 |
17 |
18 |
19 |

Suprising

20 |

and playful ways

21 |

to tell a story!

22 |
23 |
24 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | overflow-x: hidden; 6 | background-color: #161616; 7 | } 8 | .img { 9 | width: 100%; 10 | height: 100vh; 11 | background: url(/img.jpg) no-repeat 50% 50%; 12 | background-size: cover; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | .img h1 { 18 | font-family: "Ogg"; 19 | text-transform: uppercase; 20 | font-size: 120px; 21 | color: white; 22 | font-weight: lighter; 23 | font-style: italic; 24 | } 25 | .container { 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: flex-start; 29 | height: 200vh; 30 | width: 100%; 31 | } 32 | .container .text { 33 | font-size: 200px; 34 | font-family: "Ogg"; 35 | } 36 | .text > p { 37 | background: linear-gradient( 38 | to right, 39 | rgb(255, 255, 255) 50%, 40 | rgb(37, 37, 37) 50% 41 | ); 42 | background-size: 200% 100%; 43 | background-position-x: 100%; 44 | color: transparent; 45 | background-clip: text; 46 | -webkit-background-clip: text; 47 | margin-bottom: -250px; 48 | margin-left: 50px; 49 | } 50 | --------------------------------------------------------------------------------