├── img.jpg ├── index.html └── styles.css /img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/gsap-scrolltrigger-animation/65679ea6deb3bf9e53fd91c43095080d70f46ca3/img.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | scroll trigger animation 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |

the great

17 |

outdoors

18 |

volume

19 |
20 |
21 |
22 | 26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |

35 | It is a long established fact that a reader will be distracted by 36 | the readable content of a page when looking at its layout. The 37 | point of using Lorem Ipsum is that it has a more-or-less normal 38 | distribution of letters, as opposed to using 'Content here, 39 | content here', making it look like readable English. 40 |

41 |
42 |
43 |
44 |
45 | 46 | 47 | 48 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | background: #e1dcce; 4 | color: #464138; 5 | font-family: "Grifinito L"; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .smooth-scroller { 11 | overflow: hidden; 12 | } 13 | 14 | .hero-scroller { 15 | height: 250vh; 16 | overflow: hidden; 17 | } 18 | 19 | .section { 20 | position: relative; 21 | display: flex; 22 | min-height: 100vh; 23 | padding: 50px; 24 | justify-content: center; 25 | } 26 | 27 | .copy { 28 | background: #d4cfc0; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | .section-wrapper { 35 | max-width: 1400px; 36 | } 37 | 38 | .content { 39 | width: 100%; 40 | max-width: 840px; 41 | margin-right: auto; 42 | margin-left: auto; 43 | } 44 | 45 | h1 { 46 | font-size: 180px; 47 | font-weight: 400; 48 | line-height: 150px; 49 | margin: 0px; 50 | text-transform: uppercase; 51 | } 52 | 53 | .image-wrapper { 54 | position: relative; 55 | overflow: hidden; 56 | width: 100%; 57 | padding-top: 50%; 58 | } 59 | 60 | .image { 61 | position: absolute; 62 | left: 0%; 63 | top: 0%; 64 | right: 0%; 65 | bottom: 0%; 66 | width: 100%; 67 | height: 100%; 68 | object-fit: cover; 69 | } 70 | 71 | p { 72 | font-size: 4em; 73 | line-height: 1.2em; 74 | } 75 | --------------------------------------------------------------------------------