Footer
Parallax
Effect
Scrolltrigger
Layers
Typography
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<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.2852ZM157.279 76.2139C157.618 79.3381 157.79 82.5377 157.79 85.8125C157.79 93.4668 156.863 100.744 155.012 107.644H182.471C183.191 112.111 184.631 116.074 186.793 119.532C188.954 122.991 191.909 125.656 195.655 127.529C199.402 129.403 203.869 130.34 209.057 130.34C212.515 130.34 215.541 129.907 218.135 129.042C220.873 128.177 223.035 126.737 224.62 124.72C226.205 122.702 226.997 120.252 226.997 117.37C226.997 114.056 225.628 111.462 222.891 109.589C220.153 107.571 216.55 105.914 212.083 104.617C207.616 103.176 202.716 101.808 197.385 100.511C192.053 99.0697 186.721 97.2679 181.39 95.1064C176.058 92.9449 171.159 90.2069 166.691 86.8926C162.945 83.9922 159.809 80.4317 157.279 76.2139ZM513.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.2852ZM1315.9 0C1324.12 0 1331.54 2.01709 1338.17 6.05176C1344.94 9.94242 1350.27 15.2026 1354.16 21.8311C1358.05 28.4597 1360 35.881 1360 44.0947C1360 52.4526 1358.05 60.0183 1354.16 66.791C1350.27 73.4195 1344.94 78.6796 1338.17 82.5703C1331.54 86.4609 1324.12 88.4062 1315.9 88.4062C1307.55 88.4062 1299.98 86.4608 1293.21 82.5703C1286.58 78.6796 1281.32 73.4196 1277.43 66.791C1273.54 60.0183 1271.59 52.4526 1271.59 44.0947C1271.59 35.881 1273.54 28.4597 1277.43 21.8311C1281.32 15.2025 1286.58 9.94245 1293.21 6.05176C1299.98 2.01714 1307.55 4.38893e-05 1315.9 0ZM1315.9 12.9688C1310 12.9688 1304.74 14.3384 1300.13 17.0762C1295.51 19.8141 1291.84 23.4884 1289.1 28.0996C1286.36 32.7108 1285 38.0426 1285 44.0947C1285 50.291 1286.36 55.7672 1289.1 60.5225C1291.84 65.1337 1295.51 68.808 1300.13 71.5459C1304.74 74.2837 1310 75.6533 1315.9 75.6533C1321.96 75.6533 1327.29 74.2837 1331.9 71.5459C1336.51 68.808 1340.11 65.1336 1342.71 60.5225C1345.44 55.7671 1346.81 50.2911 1346.81 44.0947C1346.81 38.0426 1345.44 32.7108 1342.71 28.0996C1340.11 23.4885 1336.51 19.814 1331.9 17.0762C1327.29 14.3383 1321.96 12.9688 1315.9 12.9688ZM881.974 74.1396H903.373C907.12 74.1396 910.362 73.4912 913.1 72.1943C915.837 70.8974 917.927 69.0966 919.368 66.791C920.809 64.4855 921.529 61.6755 921.529 58.3613C921.529 53.6061 919.944 49.859 916.774 47.1211C913.604 44.3832 909.137 43.0137 903.373 43.0137H881.974V74.1396ZM990.15 74.1396H1011.55C1015.3 74.1396 1018.54 73.4912 1021.28 72.1943C1024.01 70.8975 1026.1 69.0966 1027.54 66.791C1028.99 64.4855 1029.71 61.6755 1029.71 58.3613C1029.71 53.606 1028.12 49.859 1024.95 47.1211C1021.78 44.3832 1017.31 43.0137 1011.55 43.0137H990.15V74.1396ZM1318.28 23.7764C1322.46 23.7764 1325.78 25.0015 1328.23 27.4512C1330.68 29.7568 1331.9 32.9272 1331.9 36.9619C1331.9 38.9792 1331.47 40.9964 1330.6 43.0137C1329.74 44.887 1328.51 46.4009 1326.93 47.5537L1336.44 64.4131H1322.61L1315.47 50.1475H1312.88V64.4131H1300.99V23.7764H1318.28ZM1312.88 40.2041H1316.12C1317.27 40.2041 1318.21 39.9161 1318.93 39.3398C1319.8 38.7634 1320.23 37.9706 1320.23 36.9619C1320.23 36.0974 1319.8 35.3772 1318.93 34.8008C1318.21 34.2244 1317.27 33.9356 1316.12 33.9355H1312.88V40.2041Z" 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.2852ZM157.279 76.2139C157.618 79.3381 157.79 82.5377 157.79 85.8125C157.79 93.4668 156.863 100.744 155.012 107.644H182.471C183.191 112.111 184.631 116.074 186.793 119.532C188.954 122.991 191.909 125.656 195.655 127.529C199.402 129.403 203.869 130.34 209.057 130.34C212.515 130.34 215.541 129.907 218.135 129.042C220.873 128.177 223.035 126.737 224.62 124.72C226.205 122.702 226.997 120.252 226.997 117.37C226.997 114.056 225.628 111.462 222.891 109.589C220.153 107.571 216.55 105.914 212.083 104.617C207.616 103.176 202.716 101.808 197.385 100.511C192.053 99.0697 186.721 97.2679 181.39 95.1064C176.058 92.9449 171.159 90.2069 166.691 86.8926C162.945 83.9922 159.809 80.4317 157.279 76.2139ZM513.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.2852ZM1315.9 0C1324.12 0 1331.54 2.01709 1338.17 6.05176C1344.94 9.94242 1350.27 15.2026 1354.16 21.8311C1358.05 28.4597 1360 35.881 1360 44.0947C1360 52.4526 1358.05 60.0183 1354.16 66.791C1350.27 73.4195 1344.94 78.6796 1338.17 82.5703C1331.54 86.4609 1324.12 88.4062 1315.9 88.4062C1307.55 88.4062 1299.98 86.4608 1293.21 82.5703C1286.58 78.6796 1281.32 73.4196 1277.43 66.791C1273.54 60.0183 1271.59 52.4526 1271.59 44.0947C1271.59 35.881 1273.54 28.4597 1277.43 21.8311C1281.32 15.2025 1286.58 9.94245 1293.21 6.05176C1299.98 2.01714 1307.55 4.38893e-05 1315.9 0ZM1315.9 12.9688C1310 12.9688 1304.74 14.3384 1300.13 17.0762C1295.51 19.8141 1291.84 23.4884 1289.1 28.0996C1286.36 32.7108 1285 38.0426 1285 44.0947C1285 50.291 1286.36 55.7672 1289.1 60.5225C1291.84 65.1337 1295.51 68.808 1300.13 71.5459C1304.74 74.2837 1310 75.6533 1315.9 75.6533C1321.96 75.6533 1327.29 74.2837 1331.9 71.5459C1336.51 68.808 1340.11 65.1336 1342.71 60.5225C1345.44 55.7671 1346.81 50.2911 1346.81 44.0947C1346.81 38.0426 1345.44 32.7108 1342.71 28.0996C1340.11 23.4885 1336.51 19.814 1331.9 17.0762C1327.29 14.3383 1321.96 12.9688 1315.9 12.9688ZM881.974 74.1396H903.373C907.12 74.1396 910.362 73.4912 913.1 72.1943C915.837 70.8974 917.927 69.0966 919.368 66.791C920.809 64.4855 921.529 61.6755 921.529 58.3613C921.529 53.6061 919.944 49.859 916.774 47.1211C913.604 44.3832 909.137 43.0137 903.373 43.0137H881.974V74.1396ZM990.15 74.1396H1011.55C1015.3 74.1396 1018.54 73.4912 1021.28 72.1943C1024.01 70.8975 1026.1 69.0966 1027.54 66.791C1028.99 64.4855 1029.71 61.6755 1029.71 58.3613C1029.71 53.606 1028.12 49.859 1024.95 47.1211C1021.78 44.3832 1017.31 43.0137 1011.55 43.0137H990.15V74.1396ZM1318.28 23.7764C1322.46 23.7764 1325.78 25.0015 1328.23 27.4512C1330.68 29.7568 1331.9 32.9272 1331.9 36.9619C1331.9 38.9792 1331.47 40.9964 1330.6 43.0137C1329.74 44.887 1328.51 46.4009 1326.93 47.5537L1336.44 64.4131H1322.61L1315.47 50.1475H1312.88V64.4131H1300.99V23.7764H1318.28ZM1312.88 40.2041H1316.12C1317.27 40.2041 1318.21 39.9161 1318.93 39.3398C1319.8 38.7634 1320.23 37.9706 1320.23 36.9619C1320.23 36.0974 1319.8 35.3772 1318.93 34.8008C1318.21 34.2244 1317.27 33.9356 1316.12 33.9355H1312.88V40.2041Z" fill="currentColor"></path></svg>
</div>
</footer>
<div data-footer-parallax-dark="" class="footer-wrap__dark"></div>
</div>
</main>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.demo-main {
overflow: clip;
}
.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-header__nav-a {
margin-bottom: 0;
font-size: 1.3125em;
font-weight: 600;
}
.footer-wrap {
position: relative;
overflow: hidden;
}
.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;
}
.footer-wrap__dark {
opacity: 0;
pointer-events: none;
background-color: #201d1d;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@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__logo-row {
grid-column-gap: 1.5em;
grid-row-gap: 1.5em;
}
.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-eyebrow {
font-size: 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;
}
.demo-header__nav-a {
max-width: 100%;
font-size: 1em;
}
}
/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */
/* Desktop */
:root {
--size-unit: 16; /* body font-size in design - no px */
--size-container-ideal: 1440; /* screen-size in design - no px */
--size-container-min: 992px;
--size-container-max: 1920px;
--size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
--size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--size-container-ideal: 834; /* screen-size in design - no px */
--size-container-min: 768px;
--size-container-max: 991px;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 480px;
--size-container-max: 767px;
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 320px;
--size-container-max: 479px;
}
}
/* ------------------------- Underline Link [https://osmo.supply/] ------------------------- */
[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-hover]:hover [data-underline-link]::before,
[data-underline-link]:hover::before {
transform-origin: left;
transform: scaleX(1) rotate(0.001deg);
}
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
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,
ease: 'linear'
});
}
if (dark) {
tl.from(dark, {
opacity: 0.5,
ease: 'linear'
}, '<');
}
});
}
// Initialize Footer with Parallax Effect
document.addEventListener('DOMContentLoaded', () => {
initFooterParallax();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
/* Note: Both of the sets of CSS are not needed for the parallax effect */
/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */
/* Desktop */
:root {
--size-unit: 16; /* body font-size in design - no px */
--size-container-ideal: 1440; /* screen-size in design - no px */
--size-container-min: 992px;
--size-container-max: 1920px;
--size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
--size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--size-container-ideal: 834; /* screen-size in design - no px */
--size-container-min: 768px;
--size-container-max: 991px;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 480px;
--size-container-max: 767px;
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 320px;
--size-container-max: 479px;
}
}
/* ------------------------- Underline Link [https://osmo.supply/] ------------------------- */
[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-hover]:hover [data-underline-link]::before,
[data-underline-link]:hover::before {
transform-origin: left;
transform: scaleX(1) rotate(0.001deg);
}
}Implementation
Footer Wrapper
Use [data-footer-parallax] to define the section where the scroll is tracked.
Footer Inner
Use [data-footer-parallax-inner] to move the footer element vertically on scroll.
<div data-footer-parallax class="footer__wrap">
<footer data-footer-parallax-inner class="footer">
<!-- Your footer elements in here -->
</footer>
<div data-footer-parallax-dark class="footer__dark"></div>
</div>Dark
Use [data-footer-parallax-dark] to fade in a darker layer as the footer scrolls into view.
Parallax Amount
Inside the Javascript tweak yPercent="-25" to change the amount of parallax.
Search
K
Resource Details
Last updated
October 13, 2025
Type
The Vault
Category
Sections & Layouts
Need help?
Join Slack
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.