Footer Parallax Effect

GSAP ScrollTrigger-powered footer that slides up from beneath the page content with a parallax offset and a dark overlay that fades in as it enters. Driven entirely by scroll — no clicks, no JS state.

gsapscrolltriggerfooterparallaxscrolloverlay

Setup — External Scripts

CDN — GSAP (add before </body>)

html

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

CDN — ScrollTrigger (add after GSAP)

html

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

Code

HTML

html

<main class="demo-main">
  <section class="demo-header">
    <div class="demo-header__nav-row">
      <div class="demo-header__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1360 164" fill="none"><path d="M513.618 8.42969C525.002 8.42974 535.449 10.375 544.96 14.2656C554.471 18.0123 562.756 23.4166 569.817 30.4775C577.022 37.3943 582.57 45.6077 586.461 55.1182C590.352 64.4847 592.297 74.7167 592.297 85.8125C592.297 96.9081 590.352 107.211 586.461 116.722C582.57 126.088 577.022 134.302 569.817 141.363C562.757 148.28 554.47 153.684 544.96 157.574C535.449 161.321 525.002 163.194 513.618 163.194C502.378 163.194 491.93 161.321 482.275 157.574C472.621 153.684 464.191 148.28 456.986 141.363C449.925 134.302 444.378 126.088 440.343 116.722C440.224 116.432 440.108 116.142 439.993 115.852V161.465H401.086V101.375C401.086 94.4582 401.229 88.2619 401.518 82.7861C401.806 77.1663 402.022 72.6991 402.166 69.3848C402.452 65.951 402.597 64.2218 402.599 64.1973C402.591 64.219 402.014 65.8039 400.869 68.9521C399.716 72.1223 398.203 76.3734 396.33 81.7051C394.457 86.8926 392.224 92.6568 389.63 98.9971L364.556 161.465H336.673L311.599 98.9971C309.005 92.8009 306.772 87.0367 304.898 81.7051C303.025 76.3734 301.584 72.1224 300.575 68.9521C299.571 65.7969 299.066 64.2121 299.062 64.1973C299.063 64.221 299.135 65.9503 299.278 69.3848C299.567 72.6991 299.711 77.1663 299.711 82.7861C299.855 88.2619 299.927 94.3865 299.927 101.159V161.465H261.235V135.637C260.39 137.393 259.426 139.086 258.34 140.715C253.44 147.92 246.667 153.468 238.021 157.358C229.52 161.249 219.864 163.194 209.057 163.194C196.376 163.194 185.425 160.888 176.202 156.277C166.98 151.666 159.702 145.254 154.37 137.04C151.914 133.083 149.911 128.803 148.359 124.2C144.879 130.526 140.531 136.248 135.311 141.363C128.25 148.28 119.964 153.683 110.453 157.574C100.943 161.321 90.4952 163.194 79.1113 163.194C67.8715 163.194 57.4233 161.321 47.7686 157.574C38.1141 153.684 29.6844 148.28 22.4795 141.363C15.4185 134.302 9.87077 126.088 5.83594 116.722C1.94525 107.211 4.07364e-05 96.9081 0 85.8125C0 74.7167 1.94521 64.4847 5.83594 55.1182C9.87075 45.6077 15.4187 37.3943 22.4795 30.4775C29.6845 23.4167 38.1139 18.0122 47.7686 14.2656C57.4233 10.3749 67.8715 8.42969 79.1113 8.42969C90.4952 8.42973 100.943 10.3749 110.453 14.2656C119.964 18.0123 128.25 23.4166 135.311 30.4775C142.413 37.2964 147.904 45.3762 151.786 54.7158C151.78 54.3487 151.776 53.9785 151.776 53.6055C151.776 44.5271 154.227 36.6735 159.126 30.0449C164.169 23.2722 170.798 18.0122 179.012 14.2656C187.225 10.375 196.232 8.42975 206.03 8.42969C217.702 8.42969 227.718 10.3749 236.076 14.2656C244.434 18.0122 251.063 23.4884 255.962 30.6934C258.055 33.684 259.812 36.9608 261.235 40.5225V10.1592H314.625L339.698 72.4111C342.292 78.7514 344.382 84.5873 345.967 89.9189C347.696 95.2504 348.993 99.5734 349.857 102.888C350.722 106.058 351.154 107.644 351.154 107.644C351.154 107.644 351.587 106.058 352.451 102.888C353.316 99.5734 354.613 95.2505 356.342 89.9189C358.071 84.5872 360.233 78.8233 362.827 72.627L388.116 10.1592H439.993V55.9746C440.108 55.6885 440.225 55.4027 440.343 55.1182C444.378 45.6077 449.926 37.3943 456.986 30.4775C464.191 23.4167 472.621 18.0122 482.275 14.2656C491.93 10.3749 502.378 8.42969 513.618 8.42969ZM660.48 8.42969C672.153 8.42969 682.169 10.3749 690.526 14.2656C698.884 18.0123 705.513 23.4884 710.412 30.6934C711.91 32.8328 713.234 35.1191 714.389 37.5508V10.1592H753.08V103.536C753.08 108.868 754.161 113.624 756.322 117.803C758.628 121.837 761.726 124.935 765.616 127.097C769.507 129.258 774.118 130.34 779.45 130.34C784.638 130.34 789.177 129.258 793.067 127.097C797.102 124.935 800.201 121.837 802.362 117.803C804.524 113.624 805.604 108.868 805.604 103.536V10.1592H907.695C918.359 10.1592 927.582 12.1761 935.363 16.2109C941.979 19.5188 947.344 24.0772 951.46 29.8848V10.1592H1015.87C1026.54 10.1592 1035.76 12.1762 1043.54 16.2109C1050.16 19.5187 1055.52 24.0772 1059.64 29.8848V10.1592H1098.33V128.61H1164.47V161.465H1059.64V87.2129C1055.52 92.935 1050.16 97.5119 1043.54 100.942C1035.76 104.977 1026.54 106.995 1015.87 106.995H990.15V161.465H951.46V87.2129C947.344 92.935 941.979 97.5119 935.363 100.942C927.582 104.977 918.359 106.995 907.695 106.995H881.974V161.465H843.282V115.722C842.06 122.735 839.734 129.122 836.298 134.879C830.966 143.813 823.401 150.802 813.603 155.846C803.948 160.745 792.563 163.194 779.45 163.194C766.337 163.194 754.881 160.745 745.082 155.846C735.427 150.802 727.863 143.813 722.387 134.879C720.953 132.477 719.714 129.964 718.666 127.343C717.455 132.196 715.496 136.654 712.789 140.715C707.89 147.92 701.117 153.468 692.472 157.358C683.97 161.249 674.314 163.194 663.507 163.194C650.826 163.194 639.875 160.888 630.652 156.277C621.43 151.666 614.152 145.254 608.82 137.04C603.633 128.682 600.462 118.883 599.31 107.644H636.92C637.64 112.111 639.082 116.074 641.243 119.532C643.405 122.991 646.359 125.656 650.105 127.529C653.852 129.403 658.319 130.34 663.507 130.34C666.965 130.34 669.991 129.907 672.585 129.042C675.323 128.177 677.485 126.737 679.07 124.72C680.655 122.702 681.447 120.252 681.447 117.37C681.447 114.056 680.079 111.462 677.341 109.589C674.603 107.571 671 105.914 666.533 104.617C662.066 103.176 657.167 101.808 651.835 100.511C646.503 99.0697 641.172 97.2679 635.84 95.1064C630.508 92.9449 625.609 90.2069 621.142 86.8926C616.675 83.4342 613.072 79.0396 610.334 73.708C607.596 68.3763 606.227 61.6751 606.227 53.6055C606.227 44.5271 608.677 36.6735 613.576 30.0449C618.62 23.2723 625.248 18.0122 633.462 14.2656C641.676 10.375 650.682 8.42974 660.48 8.42969ZM1191.83 62.4678L1221.44 10.1592H1264.67L1210.42 101.422V161.465H1171.51V101.785L1117.04 10.1592H1162.22L1191.83 62.4678ZM79.1113 41.2852C73.2033 41.2852 67.7271 42.4376 62.6836 44.7432C57.7842 46.9047 53.5332 50.0033 49.9307 54.0381C46.3282 58.0728 43.5184 62.828 41.501 68.3037C39.6277 73.6354 38.6904 79.4721 38.6904 85.8125C38.6905 94.3143 40.4196 101.952 43.8779 108.725C47.3363 115.497 52.0923 120.829 58.1445 124.72C64.1967 128.466 71.1859 130.34 79.1113 130.34C85.0193 130.34 90.3512 129.258 95.1064 127.097C100.006 124.791 104.257 121.621 107.859 117.586C111.462 113.551 114.2 108.868 116.073 103.536C118.09 98.0605 119.099 92.1526 119.099 85.8125C119.099 77.1665 117.37 69.529 113.911 62.9004C110.453 56.1276 105.769 50.8677 99.8613 47.1211C93.9533 43.2305 87.0367 41.2852 79.1113 41.2852ZM513.618 41.2852C507.71 41.2852 502.234 42.4376 497.19 44.7432C492.291 46.9047 488.04 50.0033 484.438 54.0381C480.835 58.0728 478.025 62.828 476.008 68.3037C474.134 73.6354 473.197 79.4721 473.197 85.8125C473.197 94.3143 474.926 101.952 478.385 108.725C481.843 115.497 486.599 120.829 492.651 124.72C498.704 128.466 505.693 130.34 513.618 130.34C519.526 130.34 524.858 129.258 529.613 127.097C534.513 124.791 538.764 121.621 542.366 117.586C545.969 113.551 548.707 108.868 550.58 103.536C552.597 98.0605 553.605 92.1526 553.605 85.8125C553.605 77.1665 551.876 69.529 548.418 62.9004C544.96 56.1276 540.276 50.8677 534.368 47.1211C528.46 43.2305 521.544 41.2852 513.618 41.2852ZM205.599 41.2852C202.428 41.2852 199.69 41.7174 197.385 42.582C195.223 43.4466 193.494 44.6717 192.197 46.2568C191.045 47.6978 190.468 49.4987 190.468 51.6602C190.468 54.5422 191.837 56.8479 194.575 58.5771C197.313 60.1621 200.915 61.6036 205.382 62.9004C209.849 64.0532 214.749 65.2773 220.081 66.5742C225.413 67.727 230.745 69.3844 236.076 71.5459C241.408 73.5633 246.307 76.3731 250.774 79.9756C255.057 83.291 258.542 87.6014 261.235 92.9033V57.2803H227.646C226.781 52.381 224.26 48.4904 220.081 45.6084C215.902 42.7264 211.074 41.2852 205.599 41.2852ZM660.049 41.2852C656.879 41.2852 654.141 41.7174 651.835 42.582C649.673 43.4466 647.944 44.6717 646.647 46.2568C645.495 47.6978 644.918 49.4987 644.918 51.6602C644.918 54.5421 646.287 56.848 649.024 58.5771C651.762 60.1622 655.365 61.6035 659.832 62.9004C664.299 64.0532 669.199 65.2774 674.53 66.5742C679.862 67.727 685.195 69.3844 690.526 71.5459C695.858 73.5633 700.758 76.3731 705.225 79.9756C708.848 82.781 711.903 86.2978 714.389 90.5254V57.2803H682.096C681.231 52.3808 678.709 48.4904 674.53 45.6084C670.351 42.7265 665.525 41.2852 660.049 41.2852Z" fill="currentColor"></path></svg>
      </div>
      <p data-underline-link="" class="demo-header__nav-a">Navigation</p>
    </div>
    <div class="demo-header__title-row">
      <h1 class="demo-header__h1">The footer marks the end of the scroll, but not the end of the story.</h1>
    </div>
    <div class="demo-header__info-row">
      <div class="demo-header__col">
        <p class="demo-eyebrow">( Concept )</p>
      </div>
      <div class="demo-header__col">
        <p class="demo-p">Parallax adds a sense of depth and motion that feels natural to the human eye. By shifting elements at different speeds, we create a layered world that reacts to scroll. It's subtle, but powerful — turning static sections into dynamic experiences.</p>
        <p data-underline-link="" class="demo-eyebrow">Scroll down ↓</p>
      </div>
      <div class="demo-header__col">
        <img src="https://cdn.prod.website-files.com/68ecabe37c9bd7423c65df4e/68ecc45be5d83f026c6c91d5_Freshly%20Baked%20Bread.avif" loading="lazy" alt="Bread" class="demo-header__img">
      </div>
    </div>
  </section>
  <div data-footer-parallax="" class="footer-wrap">
    <footer data-footer-parallax-inner="" class="demo-footer">
      <div class="demo-footer__links-row">
        <div class="demo-footer__col">
          <p class="demo-eyebrow">( Pages )</p>
          <div class="demo-footer__links">
            <a data-underline-link="" href="#" class="demo-footer__a">Home</a>
            <a data-underline-link="" href="#" class="demo-footer__a">Resources</a>
            <a data-underline-link="" href="#" class="demo-footer__a">About</a>
            <a data-underline-link="" href="#" class="demo-footer__a">Platform</a>
            <a data-underline-link="" href="#" class="demo-footer__a">Login</a>
          </div>
        </div>
        <div class="demo-footer__col">
          <p class="demo-eyebrow">( Socials )</p>
          <div class="demo-footer__links">
            <a data-underline-link="" href="#" class="demo-footer__a">LinkedIn</a>
            <a data-underline-link="" href="#" class="demo-footer__a">Instagram</a>
            <a data-underline-link="" href="#" class="demo-footer__a">X/Twitter</a>
          </div>
        </div>
        <div class="demo-footer__col">
          <p class="demo-eyebrow">( Contact )</p>
          <div class="demo-footer__links">
            <a data-underline-link="" href="#" class="demo-footer__a">hello@osmo.supply</a>
            <a data-underline-link="" href="#" class="demo-footer__a">+31 6 12 34 56 78</a>
          </div>
        </div>
      </div>
      <div class="demo-footer__logo-row">
        <p class="demo-eyebrow">Not your typical platform</p>
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1360 164" fill="none"><path d="M513.618 8.42969C525.002 8.42974 535.449 10.375 544.96 14.2656C554.471 18.0123 562.756 23.4166 569.817 30.4775C577.022 37.3943 582.57 45.6077 586.461 55.1182C590.352 64.4847 592.297 74.7167 592.297 85.8125C592.297 96.9081 590.352 107.211 586.461 116.722C582.57 126.088 577.022 134.302 569.817 141.363C562.757 148.28 554.47 153.684 544.96 157.574C535.449 161.321 525.002 163.194 513.618 163.194C502.378 163.194 491.93 161.321 482.275 157.574C472.621 153.684 464.191 148.28 456.986 141.363C449.925 134.302 444.378 126.088 440.343 116.722C440.224 116.432 440.108 116.142 439.993 115.852V161.465H401.086V101.375C401.086 94.4582 401.229 88.2619 401.518 82.7861C401.806 77.1663 402.022 72.6991 402.166 69.3848C402.452 65.951 402.597 64.2218 402.599 64.1973C402.591 64.219 402.014 65.8039 400.869 68.9521C399.716 72.1223 398.203 76.3734 396.33 81.7051C394.457 86.8926 392.224 92.6568 389.63 98.9971L364.556 161.465H336.673L311.599 98.9971C309.005 92.8009 306.772 87.0367 304.898 81.7051C303.025 76.3734 301.584 72.1224 300.575 68.9521C299.571 65.7969 299.066 64.2121 299.062 64.1973C299.063 64.221 299.135 65.9503 299.278 69.3848C299.567 72.6991 299.711 77.1663 299.711 82.7861C299.855 88.2619 299.927 94.3865 299.927 101.159V161.465H261.235V135.637C260.39 137.393 259.426 139.086 258.34 140.715C253.44 147.92 246.667 153.468 238.021 157.358C229.52 161.249 219.864 163.194 209.057 163.194C196.376 163.194 185.425 160.888 176.202 156.277C166.98 151.666 159.702 145.254 154.37 137.04C151.914 133.083 149.911 128.803 148.359 124.2C144.879 130.526 140.531 136.248 135.311 141.363C128.25 148.28 119.964 153.683 110.453 157.574C100.943 161.321 90.4952 163.194 79.1113 163.194C67.8715 163.194 57.4233 161.321 47.7686 157.574C38.1141 153.684 29.6844 148.28 22.4795 141.363C15.4185 134.302 9.87077 126.088 5.83594 116.722C1.94525 107.211 4.07364e-05 96.9081 0 85.8125C0 74.7167 1.94521 64.4847 5.83594 55.1182C9.87075 45.6077 15.4187 37.3943 22.4795 30.4775C29.6845 23.4167 38.1139 18.0122 47.7686 14.2656C57.4233 10.3749 67.8715 8.42969 79.1113 8.42969C90.4952 8.42973 100.943 10.3749 110.453 14.2656C119.964 18.0123 128.25 23.4166 135.311 30.4775C142.413 37.2964 147.904 45.3762 151.786 54.7158C151.78 54.3487 151.776 53.9785 151.776 53.6055C151.776 44.5271 154.227 36.6735 159.126 30.0449C164.169 23.2722 170.798 18.0122 179.012 14.2656C187.225 10.375 196.232 8.42975 206.03 8.42969C217.702 8.42969 227.718 10.3749 236.076 14.2656C244.434 18.0122 251.063 23.4884 255.962 30.6934C258.055 33.684 259.812 36.9608 261.235 40.5225V10.1592H314.625L339.698 72.4111C342.292 78.7514 344.382 84.5873 345.967 89.9189C347.696 95.2504 348.993 99.5734 349.857 102.888C350.722 106.058 351.154 107.644 351.154 107.644C351.154 107.644 351.587 106.058 352.451 102.888C353.316 99.5734 354.613 95.2505 356.342 89.9189C358.071 84.5872 360.233 78.8233 362.827 72.627L388.116 10.1592H439.993V55.9746C440.108 55.6885 440.225 55.4027 440.343 55.1182C444.378 45.6077 449.926 37.3943 456.986 30.4775C464.191 23.4167 472.621 18.0122 482.275 14.2656C491.93 10.3749 502.378 8.42969 513.618 8.42969ZM660.48 8.42969C672.153 8.42969 682.169 10.3749 690.526 14.2656C698.884 18.0123 705.513 23.4884 710.412 30.6934C711.91 32.8328 713.234 35.1191 714.389 37.5508V10.1592H753.08V103.536C753.08 108.868 754.161 113.624 756.322 117.803C758.628 121.837 761.726 124.935 765.616 127.097C769.507 129.258 774.118 130.34 779.45 130.34C784.638 130.34 789.177 129.258 793.067 127.097C797.102 124.935 800.201 121.837 802.362 117.803C804.524 113.624 805.604 108.868 805.604 103.536V10.1592H907.695C918.359 10.1592 927.582 12.1761 935.363 16.2109C941.979 19.5188 947.344 24.0772 951.46 29.8848V10.1592H1015.87C1026.54 10.1592 1035.76 12.1762 1043.54 16.2109C1050.16 19.5187 1055.52 24.0772 1059.64 29.8848V10.1592H1098.33V128.61H1164.47V161.465H1059.64V87.2129C1055.52 92.935 1050.16 97.5119 1043.54 100.942C1035.76 104.977 1026.54 106.995 1015.87 106.995H990.15V161.465H951.46V87.2129C947.344 92.935 941.979 97.5119 935.363 100.942C927.582 104.977 918.359 106.995 907.695 106.995H881.974V161.465H843.282V115.722C842.06 122.735 839.734 129.122 836.298 134.879C830.966 143.813 823.401 150.802 813.603 155.846C803.948 160.745 792.563 163.194 779.45 163.194C766.337 163.194 754.881 160.745 745.082 155.846C735.427 150.802 727.863 143.813 722.387 134.879C720.953 132.477 719.714 129.964 718.666 127.343C717.455 132.196 715.496 136.654 712.789 140.715C707.89 147.92 701.117 153.468 692.472 157.358C683.97 161.249 674.314 163.194 663.507 163.194C650.826 163.194 639.875 160.888 630.652 156.277C621.43 151.666 614.152 145.254 608.82 137.04C603.633 128.682 600.462 118.883 599.31 107.644H636.92C637.64 112.111 639.082 116.074 641.243 119.532C643.405 122.991 646.359 125.656 650.105 127.529C653.852 129.403 658.319 130.34 663.507 130.34C666.965 130.34 669.991 129.907 672.585 129.042C675.323 128.177 677.485 126.737 679.07 124.72C680.655 122.702 681.447 120.252 681.447 117.37C681.447 114.056 680.079 111.462 677.341 109.589C674.603 107.571 671 105.914 666.533 104.617C662.066 103.176 657.167 101.808 651.835 100.511C646.503 99.0697 641.172 97.2679 635.84 95.1064C630.508 92.9449 625.609 90.2069 621.142 86.8926C616.675 83.4342 613.072 79.0396 610.334 73.708C607.596 68.3763 606.227 61.6751 606.227 53.6055C606.227 44.5271 608.677 36.6735 613.576 30.0449C618.62 23.2723 625.248 18.0122 633.462 14.2656C641.676 10.375 650.682 8.42974 660.48 8.42969ZM1191.83 62.4678L1221.44 10.1592H1264.67L1210.42 101.422V161.465H1171.51V101.785L1117.04 10.1592H1162.22L1191.83 62.4678ZM79.1113 41.2852C73.2033 41.2852 67.7271 42.4376 62.6836 44.7432C57.7842 46.9047 53.5332 50.0033 49.9307 54.0381C46.3282 58.0728 43.5184 62.828 41.501 68.3037C39.6277 73.6354 38.6904 79.4721 38.6904 85.8125C38.6905 94.3143 40.4196 101.952 43.8779 108.725C47.3363 115.497 52.0923 120.829 58.1445 124.72C64.1967 128.466 71.1859 130.34 79.1113 130.34C85.0193 130.34 90.3512 129.258 95.1064 127.097C100.006 124.791 104.257 121.621 107.859 117.586C111.462 113.551 114.2 108.868 116.073 103.536C118.09 98.0605 119.099 92.1526 119.099 85.8125C119.099 77.1665 117.37 69.529 113.911 62.9004C110.453 56.1276 105.769 50.8677 99.8613 47.1211C93.9533 43.2305 87.0367 41.2852 79.1113 41.2852ZM513.618 41.2852C507.71 41.2852 502.234 42.4376 497.19 44.7432C492.291 46.9047 488.04 50.0033 484.438 54.0381C480.835 58.0728 478.025 62.828 476.008 68.3037C474.134 73.6354 473.197 79.4721 473.197 85.8125C473.197 94.3143 474.926 101.952 478.385 108.725C481.843 115.497 486.599 120.829 492.651 124.72C498.704 128.466 505.693 130.34 513.618 130.34C519.526 130.34 524.858 129.258 529.613 127.097C534.513 124.791 538.764 121.621 542.366 117.586C545.969 113.551 548.707 108.868 550.58 103.536C552.597 98.0605 553.605 92.1526 553.605 85.8125C553.605 77.1665 551.876 69.529 548.418 62.9004C544.96 56.1276 540.276 50.8677 534.368 47.1211C528.46 43.2305 521.544 41.2852 513.618 41.2852ZM205.599 41.2852C202.428 41.2852 199.69 41.7174 197.385 42.582C195.223 43.4466 193.494 44.6717 192.197 46.2568C191.045 47.6978 190.468 49.4987 190.468 51.6602C190.468 54.5422 191.837 56.8479 194.575 58.5771C197.313 60.1621 200.915 61.6036 205.382 62.9004C209.849 64.0532 214.749 65.2773 220.081 66.5742C225.413 67.727 230.745 69.3844 236.076 71.5459C241.408 73.5633 246.307 76.3731 250.774 79.9756C255.057 83.291 258.542 87.6014 261.235 92.9033V57.2803H227.646C226.781 52.381 224.26 48.4904 220.081 45.6084C215.902 42.7264 211.074 41.2852 205.599 41.2852ZM660.049 41.2852C656.879 41.2852 654.141 41.7174 651.835 42.582C649.673 43.4466 647.944 44.6717 646.647 46.2568C645.495 47.6978 644.918 49.4987 644.918 51.6602C644.918 54.5421 646.287 56.848 649.024 58.5771C651.762 60.1622 655.365 61.6035 659.832 62.9004C664.299 64.0532 669.199 65.2774 674.53 66.5742C679.862 67.727 685.195 69.3844 690.526 71.5459C695.858 73.5633 700.758 76.3731 705.225 79.9756C708.848 82.781 711.903 86.2978 714.389 90.5254V57.2803H682.096C681.231 52.3808 678.709 48.4904 674.53 45.6084C670.351 42.7265 665.525 41.2852 660.049 41.2852Z" fill="currentColor"></path></svg>
      </div>
    </footer>
    <div data-footer-parallax-dark="" class="footer-wrap__dark"></div>
  </div>
</main>

CSS

css

.demo-main {
  overflow: clip;
}

/* Footer wrapper — overflow hidden clips the parallax offset */
.footer-wrap {
  position: relative;
  overflow: hidden;
}

/* Dark overlay — fades in as the footer scrolls into view */
.footer-wrap__dark {
  opacity: 0;
  pointer-events: none;
  background-color: #201d1d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ── Demo page styles (adapt to your own design) ── */

.demo-eyebrow {
  opacity: .5;
  margin-bottom: 0;
  font-size: 1.3125em;
  font-weight: 600;
}

.demo-p {
  max-width: 19em;
  margin-bottom: 0;
  font-size: 1.3125em;
  font-weight: 600;
}

.demo-header {
  grid-column-gap: 7.5em;
  grid-row-gap: 7.5em;
  letter-spacing: -.02em;
  border-bottom: 1px solid #201d1d26;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100svh;
  padding: 2.5em;
  font-weight: 600;
  display: flex;
  position: relative;
}

.demo-header__nav-row {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.demo-header__title-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  padding-left: calc(33.3333% + .833333em);
  display: flex;
}

.demo-header__info-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  display: flex;
}

.demo-header__col {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  width: calc(33.3333% - 1.66667em);
  display: flex;
}

.demo-header__h1 {
  letter-spacing: -.03em;
  max-width: 11em;
  font-size: 4em;
  font-weight: 600;
  line-height: .95;
}

.demo-header__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.demo-header__logo {
  width: 15em;
}

.demo-footer {
  grid-column-gap: 7.5em;
  grid-row-gap: 7.5em;
  letter-spacing: -.02em;
  flex-flow: column;
  justify-content: space-between;
  min-height: 100svh;
  padding: 2.5em;
  font-weight: 600;
  display: flex;
  position: relative;
}

.demo-footer__links-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  display: flex;
}

.demo-footer__logo-row {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  display: flex;
}

.demo-footer__col {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  width: calc(33.3333% - 1.66667em);
  display: flex;
}

.demo-footer__links {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.demo-footer__a {
  color: inherit;
  font-size: 2.75em;
  line-height: 1;
  text-decoration: none;
}

/* ── Underline Link ── */
[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* ── Responsive ── */
@media screen and (max-width: 991px) {
  .demo-header__title-row { padding-left: 0; }
  .demo-header__info-row { flex-flow: column; }
  .demo-header__col { width: 100%; }
  .demo-header__logo { width: 50vw; }
  .demo-footer__links-row { flex-flow: column; }
  .demo-footer__col { width: 100%; }
}

@media screen and (max-width: 767px) {
  .demo-eyebrow { font-size: 1em; }
  .demo-p { max-width: 100%; font-size: 1.25em; }
  .demo-header { grid-column-gap: 5em; grid-row-gap: 5em; padding-left: 1em; padding-right: 1em; }
  .demo-footer { padding-left: 1em; padding-right: 1em; }
  .demo-footer__col { grid-column-gap: 1em; grid-row-gap: 1em; }
  .demo-footer__a { font-size: 1.75em; }
  .demo-header__info-row { grid-column-gap: 1em; grid-row-gap: 1em; }
  .demo-header__h1 { font-size: 3em; }
}

JavaScript

javascript

gsap.registerPlugin(ScrollTrigger);

function initFooterParallax() {
  document.querySelectorAll('[data-footer-parallax]').forEach(el => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: el,
        start: 'clamp(top bottom)',
        end: 'clamp(top top)',
        scrub: true,
      }
    });

    const inner = el.querySelector('[data-footer-parallax-inner]');
    const dark  = el.querySelector('[data-footer-parallax-dark]');

    if (inner) {
      tl.from(inner, {
        yPercent: -25,  // ← adjust this value to change parallax amount
        ease: 'linear',
      });
    }

    if (dark) {
      tl.from(dark, {
        opacity: 0.5,
        ease: 'linear',
      }, '<');
    }
  });
}

document.addEventListener('DOMContentLoaded', () => {
  initFooterParallax();
});

Attributes

Name	Type	Default	Description
[data-footer-parallax]	attribute	—	The outer wrapper element. ScrollTrigger uses this as the scroll trigger — it tracks when this element enters the viewport from the bottom.
[data-footer-parallax-inner]	attribute	—	The footer element that moves. GSAP animates it from yPercent: -25 to 0 as the wrapper scrolls into view, creating the parallax rise effect.
[data-footer-parallax-dark]	attribute	—	An absolutely-positioned overlay div. GSAP animates its opacity from 0.5 to 0 in sync with the footer scroll, fading a dark tint in as the footer rises.

Notes

•Requires GSAP and ScrollTrigger loaded via CDN before the script runs.
•The parent element (.demo-main) needs overflow: clip to prevent the footer from appearing above its container before the scroll animation begins.
•Multiple [data-footer-parallax] elements on the same page are supported — each gets its own independent ScrollTrigger timeline.
•scrub: true ties the animation directly to scroll position — no duration, no easing beyond what's on the individual tweens.

Guide

Minimal structure

Only three elements are required. The wrapper tracks scroll position, the inner element moves, and the dark overlay fades.

<div data-footer-parallax class="footer-wrap">
  <footer data-footer-parallax-inner class="footer">
    <!-- footer content -->
  </footer>
  <div data-footer-parallax-dark class="footer-wrap__dark"></div>
</div>

Parallax amount

Adjust yPercent inside the JavaScript to control how far the footer travels. -25 means the footer starts 25% of its height above its resting position. Larger values = more dramatic effect.

tl.from(inner, { yPercent: -25, ease: 'linear' });

Dark overlay

The overlay starts at opacity: 0.5 and animates to 0, so the footer begins slightly darkened and brightens as it fully enters. Remove the dark element (or the tl.from(dark, ...) call) if you do not need the tint.

overflow: hidden on the wrapper

The .footer-wrap must have overflow: hidden (or overflow: clip on the parent .demo-main). Without it, the footer's initial negative yPercent offset will be visible before the animation starts.

Back to Sections