Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div data-barba="wrapper">
  <div class="transition-one"></div>
  <div class="transition-two"></div>
    <div class="animation">
      <div class="ani-logo">
<svg width="100%" height="100%" viewBox="0 0 466 342" fill="none" xmlns="http://www.w3.org/2000/svg">  
          <g id="blab-logo">
            <g id="blab">
              <path fill="#32425A" class="b" d="M1.87931 206.563C1.87931 189.424 1.81641 172.287 1.92307 155.147C1.95042 150.911 1.19283 146.821 0.574719 142.676C-0.729876 133.925 1.44172 131.263 10.4016 131.182C27.643 131.031 44.8899 131.063 62.1341 131.139C69.5623 131.171 77.0125 130.604 84.4107 131.806C93.6085 133.302 101.939 136.636 109.307 142.425C114.225 146.289 117.512 151.138 120.384 156.576C125.808 166.841 126.278 177.336 122.405 187.966C121.103 191.538 118.557 194.773 115.798 197.618C114.509 198.947 114.203 199.797 116.202 200.988C122.348 204.647 125.977 210.292 129.035 216.613C132.886 224.572 133.064 232.729 131.253 240.943C128.6 252.974 122.244 263.11 112.023 270.154C103.031 276.35 92.7633 279.755 81.5745 280.203C60.8049 281.038 40.0462 280.279 19.2848 280.076C10.6149 279.993 2.31691 273.316 2.11999 263.56C1.84376 249.928 1.93401 236.288 1.88205 222.65C1.8629 217.291 1.87931 211.926 1.87931 206.563ZM60.2387 247.274C65.788 247.274 71.3401 247.315 76.8894 247.266C87.4438 247.172 97.4812 235.645 91.9839 225.15C89.2735 219.974 85.4062 216.483 79.4494 215.795C67.0981 214.372 54.6949 215.498 42.319 215.26C40.3772 215.222 40.3772 216.443 40.3826 217.82C40.4018 226.795 40.4455 235.772 40.3498 244.747C40.3279 246.686 40.8093 247.369 42.8797 247.32C48.6615 247.185 54.4515 247.274 60.2387 247.274ZM59.1912 162.454C59.1912 162.497 59.1912 162.54 59.1912 162.583C53.6474 162.583 48.1035 162.675 42.5652 162.529C40.7737 162.481 40.3526 163.037 40.3662 164.66C40.4264 171.644 40.4237 178.629 40.3662 185.614C40.3553 187.14 40.6014 187.874 42.4503 187.896C53.7705 188.023 65.107 188.433 76.3916 187.647C80.6993 187.348 84.5529 184.985 86.4428 180.571C90.4222 171.274 84.2329 162.462 73.6867 162.454C68.8567 162.451 64.024 162.454 59.1912 162.454Z" />
                <g id="pencl-t">
                  <path fill="#32425A" class="pencil" d="M195.843 248.751C194.705 252.499 193.357 256.441 192.323 260.461C190.348 268.126 187.46 275.486 184.807 282.922C183.705 286.014 184.416 288.889 185.023 291.816C185.373 293.506 185.343 294.891 183.404 295.361C181.536 295.815 180.948 294.589 180.664 293.026C179.233 285.158 172.546 281.124 167.694 275.754C166.365 274.285 165.088 272.77 163.704 271.353C161.628 269.228 159.667 266.93 157.326 265.132C151.476 260.634 149.794 254.078 148.355 247.552C145.491 234.568 143.525 221.373 140.251 208.499C136.649 194.338 134.8 179.809 130.952 165.766C127.235 152.21 125.652 138.248 121.927 124.748C117.728 109.534 115.953 93.8088 111.881 78.6186C108.153 64.7109 106.006 50.5278 102.831 36.5337C102.675 35.8479 102.525 35.316 101.994 34.7463C101.029 33.7122 101.398 32.9265 102.85 32.6295C112.135 30.7368 121.399 28.7334 130.712 26.9784C132.705 26.6031 135.161 24.9102 136.649 26.2629C137.959 27.4536 137.828 30.1077 138.525 32.049C142.86 44.0937 144.463 56.8674 148.366 68.9715C152.058 80.4249 153.869 92.3184 157.602 103.683C161.491 115.522 163.365 127.85 167.224 139.641C171.176 151.71 172.967 164.317 176.93 176.326C180.773 187.969 182.48 200.127 186.298 211.721C189.9 222.664 191.997 233.95 195.022 245.02C195.32 246.137 195.52 247.282 195.843 248.751ZM165.542 173.297C163.228 174.018 160.148 173.559 158.436 175.549C157.022 177.19 158.691 179.185 159.588 180.911C159.845 181.402 159.774 182.053 159.899 182.62C161.292 188.833 162.632 195.059 164.103 201.255C165.821 208.489 165.856 208.424 173.375 206.496C175.101 206.053 175.604 205.594 175.155 203.688C173.006 194.538 171.05 185.341 169.078 176.151C168.673 174.255 167.607 173.345 165.542 173.297ZM180.387 224.594C179.397 221.281 179.378 217.472 177.611 214.175C177.269 213.535 177.548 211.775 175.768 212.228C172.858 212.968 169.931 213.656 167.035 214.45C166.983 214.464 167.172 215.525 167.33 216.076C168.304 219.488 169.363 222.88 170.26 226.311C170.629 227.723 171.425 228.312 172.77 228.107C174.852 227.788 176.925 227.397 178.976 226.932C180.015 226.695 180.472 225.885 180.387 224.594Z" />
                  <path fill="#32425A" class="pencil" d="M127.038 20.3175C127.35 22.3911 126.013 22.9797 124.416 23.3091C120.133 24.1866 115.833 24.9912 111.561 25.9146C109.269 26.4087 108.008 25.7013 107.743 23.3388C107.275 19.1619 106.121 15.1065 105.462 10.9512C104.786 6.69061 106.561 3.79351 109.636 1.71721C112.083 0.062106 115.177 0.675006 117.983 1.55791C121.585 2.69191 123.62 4.90051 124.18 8.81821C124.736 12.7035 126.054 16.4889 127.038 20.3175Z" />
                </g>
              <path fill="#32425A" class="ab" d="M323.515 207.554C329.21 204.684 333.911 200.699 338.99 197.294C340.089 196.557 339.542 195.107 339.542 193.987C339.567 173.702 339.635 153.414 339.482 133.129C339.46 130.059 340.215 129.025 343.358 129.236C350.852 129.74 358.408 128.415 365.878 130.415C371.66 131.962 379.441 139.293 379.266 146.926C379.099 154.267 379.227 161.614 379.241 168.961C379.249 172.881 379.167 172.687 382.66 171.064C391.527 166.946 400.787 165.256 410.702 165.893C422.985 166.682 433.823 170.772 443.429 178.076C449.003 182.312 453.543 187.539 457.158 193.625C465.858 208.278 467.472 223.887 462.721 239.825C457.853 256.157 447.332 268.205 431.277 275.233C415.994 281.923 400.519 281.869 384.831 276.958C382.296 276.164 371.069 276.985 368.815 278.13C365.73 279.698 362.418 280.39 358.964 280.417C353.532 280.457 348.095 280.352 342.669 280.546C340.215 280.635 339.474 279.96 339.504 277.471C339.638 265.812 339.559 254.154 339.556 242.495C339.556 241.367 339.556 240.238 339.556 239.077C338.2 239.007 337.234 239.301 336.435 240.065C333.044 243.302 329.144 245.884 325.271 248.495C323.751 249.521 323.253 250.671 323.277 252.539C323.389 260.923 323.269 269.309 323.25 277.692C323.247 278.843 323.611 280.16 321.707 280.095C314.402 279.844 307.075 280.535 299.784 279.609C295.689 279.091 292.268 277.09 289.153 274.622C287.917 273.642 287.156 273.645 285.783 274.315C270.618 281.715 254.952 281.775 239.228 276.588C226.141 272.271 215.458 264.659 207.371 253.298C199.138 241.731 196.882 229.092 198.282 215.43C198.955 208.872 200.758 202.562 204.1 196.938C210.037 186.951 218.018 178.859 228.542 173.37C245.762 164.39 263.679 162.451 281.902 169.336C286.169 170.948 288.753 171.18 292.137 168.469C295.957 165.41 300.591 164.678 305.456 164.87C310.292 165.059 315.141 165.097 319.979 164.992C322.427 164.94 323.373 165.386 323.329 168.205C323.135 180.908 323.266 193.614 323.288 206.321C323.291 206.631 323.4 206.939 323.515 207.554ZM354.002 226.168C355.591 226.298 356.735 226.225 357.892 225.869C363.605 224.105 369.452 222.969 375.398 222.261C377.441 222.018 378.423 222.091 378.732 224.691C379.936 234.822 385.838 241.961 396.852 244.045C410.226 246.575 420.594 239.792 424.606 227.116C426.603 220.811 424.546 215.231 420.958 209.922C416.76 203.715 410.797 200.972 403.517 200.362C396.146 199.746 389.713 202.619 383.524 205.875C372.983 211.421 363.509 218.557 354.002 226.168ZM306.717 219.642C304.969 219.154 303.976 219.305 302.932 219.578C298.055 220.852 293.14 221.945 288.138 222.664C285.644 223.02 284.134 222.88 283.614 219.702C282.165 210.821 277.018 204.682 268.342 201.601C258.204 198.002 246.093 201.938 240.626 210.986C233.408 222.934 237.932 240.011 254.837 243.875C262.32 245.584 269.023 243.624 275.579 240.584C281.306 237.927 286.71 234.619 291.836 230.996C296.751 227.521 301.873 224.246 306.717 219.642Z" />
            </g>
            
            
              <path fill="#3BB34B" class="green-bg" d="M233.531 341.801C157.588 341.801 81.6429 341.788 5.70015 341.842C1.81098 341.844 1.91218 340.003 1.9997 336.944C2.27593 327.043 2.12551 317.126 2.04072 307.217C2.01884 304.741 2.09816 303.121 5.49229 303.002C7.78422 302.921 10.1445 302.611 12.4747 302.608C162 302.592 311.528 302.611 461.053 302.511C464.587 302.508 465.3 303.494 465.24 306.766C465.046 317.253 465.18 327.748 465.249 338.237C465.265 340.694 464.31 341.852 461.718 341.771C458.296 341.663 454.869 341.747 451.442 341.747C378.806 341.747 306.167 341.747 233.531 341.747C233.531 341.766 233.531 341.785 233.531 341.801ZM85.3652 332.394C86.6917 332.089 87.329 331.195 88.0756 330.485C93.5128 325.32 93.5538 325.266 98.8652 330.488C100.755 332.346 102.065 332.932 104.338 330.699C106.819 328.263 105.071 327.145 103.531 325.779C98.3866 321.214 98.3702 321.232 103.367 316.832C103.63 316.599 103.829 316.3 104.086 316.062C105.473 314.763 106.46 313.592 104.338 311.931C102.713 310.662 101.712 309.207 99.4341 311.367C93.6331 316.864 93.4225 316.84 87.5341 311.405C84.6049 308.702 83.5164 312.077 82.1598 312.984C80.2262 314.275 81.982 315.166 83.4042 316.078C88.959 319.648 88.9645 322.402 83.6012 326.184C82.5755 326.908 80.9017 327.356 81.3885 328.868C81.982 330.723 84.3341 330.952 85.3652 332.394ZM262.276 320.525C262.651 320.431 263.025 320.333 263.403 320.239C265.728 323.846 268.159 327.388 270.328 331.085C271.438 332.975 273.03 332.689 274.619 332.556C276.419 332.408 276.369 330.952 276.372 329.656C276.386 324.416 276.348 319.172 276.397 313.932C276.416 311.909 275.669 310.927 273.489 310.975C271.449 311.021 270.834 312.023 270.864 313.843C270.913 316.675 270.878 319.51 270.878 322.342C268.799 320.625 267.582 318.686 266.225 316.853C264.921 315.09 264.19 312.93 262.205 311.621C261.075 310.875 259.959 310.846 258.854 311.199C257.796 311.54 257.758 312.698 257.763 313.581C257.788 319.048 257.919 324.516 257.966 329.983C257.979 331.541 258.146 332.686 260.222 332.659C262.44 332.629 262.265 331.206 262.271 329.8C262.284 326.705 262.276 323.617 262.276 320.525ZM377.124 321.419C376.87 319.453 377.701 316.961 376.134 314.944C373.563 311.634 368.985 310.325 365.046 311.583C361.152 312.827 359.543 314.823 359.486 319.056C359.42 323.968 358.285 329.354 364.256 332.135C364.874 332.424 365.607 332.535 366.299 332.599C373.467 333.291 377.179 329.557 377.124 321.419ZM404.269 332.629C405.065 332.629 405.535 332.64 406.008 332.627C410.92 332.494 413.232 330.523 413.292 326.422C413.352 322.124 411.487 320.409 406.353 320.042C405.53 319.982 404.666 320.05 403.9 319.81C402.702 319.434 401.879 318.614 401.939 317.237C401.996 315.914 403.011 315.438 404.061 315.249C405.82 314.931 407.567 315.012 409.238 315.851C410.74 316.605 411.459 315.301 412.036 314.415C412.931 313.046 411.574 312.593 410.666 312.177C407.775 310.856 404.802 310.5 401.75 311.664C398.545 312.884 397.265 315.209 397.65 318.527C398.014 321.651 399.874 323.225 402.932 323.638C404.329 323.827 405.754 323.984 407.091 324.394C408.112 324.705 409.063 325.469 408.795 326.711C408.56 327.799 407.803 328.536 406.517 328.504C404.411 328.447 402.24 328.868 400.29 327.702C398.783 326.797 398.06 328.047 397.423 328.879C396.532 330.043 397.552 330.858 398.446 331.403C400.32 332.543 402.437 332.743 404.269 332.629ZM323.173 321.451C323.179 321.451 323.187 321.451 323.193 321.451C323.193 324.591 323.193 327.731 323.193 330.869C323.193 331.97 323.66 332.613 324.858 332.645C325.933 332.672 326.68 332.381 326.833 331.182C326.981 330.034 327.369 328.898 327.369 327.756C327.369 326.057 328.148 325.561 329.751 325.569C332.817 325.588 335.385 324.248 337.743 322.429C340.429 320.352 340.308 315.644 337.759 313.494C333.788 310.144 329.125 311.051 324.601 311.075C323.116 311.083 323.19 312.387 323.182 313.43C323.16 316.102 323.173 318.778 323.173 321.451ZM19.9057 320.879C19.9057 324.661 19.9304 327.691 19.8948 330.718C19.8784 332.294 20.7563 332.659 22.1512 332.656C23.4804 332.651 24.1122 332.124 24.0958 330.799C24.0766 329.403 24.1805 328.001 24.1067 326.608C23.97 324.049 25.1104 323.306 27.5829 323.816C29.057 324.122 30.6215 324.097 32.1421 324.065C33.4877 324.035 33.8214 323.058 33.8816 321.883C33.9554 320.477 33.2006 320.047 31.937 320.055C30.1675 320.066 28.3952 319.966 26.6311 320.058C24.8561 320.15 24.1094 319.569 24.0876 317.693C24.0657 315.711 24.7631 314.947 26.7596 315.079C28.521 315.195 30.2987 315.174 32.0655 315.093C33.6245 315.02 35.8426 315.422 35.8426 313.116C35.8426 310.94 33.8296 310.937 32.112 311.01C31.6416 311.029 31.1657 310.959 30.698 311.002C27.2219 311.326 22.7638 309.469 20.5184 311.826C18.4617 313.986 20.1409 318.287 19.9057 320.879ZM177.762 311.008C175.995 311.008 174.231 310.983 172.464 311.016C171.116 311.04 169.464 310.603 169.466 312.86C169.469 314.842 170.801 315.187 172.319 315.041C174.863 314.798 175.207 316.162 175.155 318.211C175.057 322.159 175.106 326.111 175.128 330.061C175.136 331.579 175.016 333.331 177.297 333.277C179.285 333.231 180.155 332.113 180.103 330.094C180.013 326.495 180.19 322.888 180.051 319.291C179.947 316.578 180.368 314.647 183.795 315.028C185.338 315.198 185.814 314.267 185.756 312.849C185.701 311.515 185.048 310.991 183.762 311.005C181.766 311.024 179.764 311.01 177.762 311.008ZM438.839 323.741C438.834 323.741 438.828 323.741 438.823 323.741C438.823 325.839 438.905 327.942 438.798 330.034C438.7 331.981 439.438 332.71 441.457 332.691C443.431 332.672 443.839 331.749 443.817 330.091C443.771 326.244 443.924 322.394 443.771 318.551C443.675 316.143 444.156 314.672 447.009 315.031C448.486 315.217 449.52 314.823 449.473 312.981C449.427 311.129 448.297 310.981 446.872 310.989C443.092 311.01 439.312 311 435.535 310.989C434.253 310.986 433.159 311.124 433.172 312.809C433.183 314.229 433.834 315.214 435.254 315.009C438.88 314.485 439.023 316.605 438.85 319.191C438.757 320.703 438.839 322.223 438.839 323.741ZM56.0734 321.81C56.0816 321.81 56.0898 321.81 56.098 321.81C56.098 324.602 56.1636 327.397 56.0734 330.186C56.0159 331.949 56.6313 332.683 58.5021 332.689C60.4302 332.697 60.8979 331.843 60.8815 330.137C60.8295 324.67 60.8706 319.202 60.8979 313.732C60.9061 312.239 60.8979 310.94 58.7564 310.978C56.7599 311.013 56.0296 311.923 56.0624 313.78C56.1089 316.459 56.0734 319.135 56.0734 321.81ZM236.069 322.151C236.075 322.151 236.077 322.151 236.083 322.151C236.083 319.248 236.058 316.345 236.094 313.443C236.11 311.985 235.82 310.956 233.993 310.986C232.385 311.013 231.163 311.34 231.157 313.232C231.149 319.037 231.171 324.842 231.138 330.645C231.127 332.456 232.224 332.653 233.676 332.672C235.24 332.694 236.121 332.221 236.083 330.507C236.028 327.723 236.069 324.937 236.069 322.151ZM148.834 321.883C148.834 318.989 148.817 316.092 148.839 313.197C148.85 311.845 148.451 311.018 146.856 310.986C145.174 310.951 144.559 311.661 144.57 313.259C144.611 319.051 144.608 324.842 144.589 330.631C144.583 332.122 145.284 332.651 146.744 332.653C148.251 332.656 148.858 332.014 148.842 330.569C148.812 327.675 148.836 324.778 148.834 321.883Z" />
<g id="gb-ltr">
                  <path fill="#32425A" class="btm-l-f" d="M19.9057 320.879C20.1382 318.287 18.4589 313.986 20.5183 311.828C22.7638 309.471 27.2218 311.329 30.698 311.005C31.1657 310.962 31.6416 311.032 32.112 311.013C33.8296 310.943 35.8425 310.943 35.8425 313.119C35.8425 315.425 33.6245 315.023 32.0655 315.095C30.3014 315.176 28.5209 315.198 26.7596 315.082C24.763 314.95 24.0656 315.714 24.0875 317.696C24.1094 319.572 24.856 320.153 26.6311 320.061C28.3951 319.969 30.1674 320.069 31.937 320.058C33.1978 320.05 33.9554 320.479 33.8815 321.886C33.8214 323.058 33.4877 324.038 32.1421 324.067C30.6214 324.1 29.057 324.122 27.5828 323.819C25.1104 323.309 23.9699 324.051 24.1067 326.611C24.1805 328.004 24.0793 329.405 24.0957 330.801C24.1121 332.127 23.4803 332.654 22.1511 332.659C20.7563 332.664 19.8783 332.297 19.8947 330.72C19.9303 327.691 19.9057 324.661 19.9057 320.879Z" />
                  <path fill="#32425A" class="btm-l-i" d="M56.0734 321.81C56.0734 319.135 56.1089 316.459 56.0624 313.783C56.0296 311.926 56.7598 311.016 58.7564 310.981C60.8979 310.943 60.9061 312.241 60.8979 313.735C60.8678 319.202 60.8295 324.672 60.8815 330.14C60.8979 331.849 60.4329 332.699 58.502 332.691C56.6313 332.683 56.0187 331.949 56.0734 330.188C56.1636 327.399 56.098 324.605 56.098 321.813C56.0898 321.81 56.0816 321.81 56.0734 321.81Z" />
                  <path fill="#FEFEFE" class="btm-l-x" d="M85.3652 332.394C84.3368 330.953 81.982 330.723 81.3858 328.865C80.8989 327.351 82.5728 326.903 83.5984 326.182C88.9644 322.402 88.9562 319.645 83.4015 316.076C81.9793 315.163 80.2234 314.272 82.157 312.981C83.5136 312.077 84.6049 308.699 87.5313 311.402C93.4198 316.837 93.6304 316.859 99.4313 311.364C101.71 309.204 102.711 310.659 104.335 311.928C106.458 313.589 105.47 314.761 104.084 316.059C103.826 316.3 103.627 316.599 103.364 316.829C98.3674 321.23 98.3838 321.211 103.528 325.777C105.068 327.143 106.816 328.261 104.335 330.696C102.062 332.926 100.752 332.343 98.8624 330.485C93.551 325.264 93.51 325.318 88.0728 330.483C87.3289 331.193 86.6917 332.087 85.3652 332.394Z" />
        
                  <path fill="#32425A" class="btm-l-i2" d="M148.834 321.883C148.834 324.778 148.812 327.675 148.845 330.569C148.861 332.014 148.257 332.656 146.747 332.653C145.286 332.651 144.586 332.122 144.592 330.631C144.611 324.84 144.613 319.048 144.572 313.259C144.562 311.661 145.177 310.951 146.859 310.986C148.453 311.018 148.85 311.845 148.842 313.197C148.817 316.092 148.834 318.989 148.834 321.883Z" />
                  <path fill="#32425A" class="btm-l-t" d="M177.762 311.008C179.764 311.008 181.763 311.024 183.765 311.002C185.05 310.989 185.704 311.515 185.759 312.846C185.816 314.264 185.34 315.198 183.798 315.025C180.371 314.645 179.947 316.575 180.054 319.289C180.193 322.885 180.015 326.492 180.106 330.091C180.155 332.111 179.288 333.226 177.299 333.275C175.019 333.329 175.139 331.576 175.131 330.059C175.109 326.109 175.057 322.156 175.158 318.209C175.21 316.159 174.865 314.796 172.322 315.039C170.804 315.185 169.472 314.839 169.469 312.857C169.466 310.6 171.118 311.037 172.467 311.013C174.231 310.983 175.998 311.008 177.762 311.008Z" />
        
                  <path fill="#32425A" class="btm-l-i3" d="M236.069 322.15C236.069 324.937 236.025 327.723 236.085 330.51C236.121 332.224 235.24 332.697 233.679 332.675C232.226 332.656 231.13 332.459 231.141 330.647C231.176 324.842 231.152 319.04 231.16 313.235C231.163 311.342 232.385 311.016 233.996 310.989C235.823 310.956 236.113 311.988 236.096 313.446C236.064 316.348 236.085 319.251 236.085 322.153C236.08 322.15 236.075 322.15 236.069 322.15Z" />
                  <path fill="#32425A" class="btm-l-n" d="M262.276 320.525C262.276 323.617 262.284 326.708 262.273 329.8C262.268 331.206 262.443 332.626 260.225 332.659C258.152 332.686 257.982 331.541 257.968 329.983C257.922 324.516 257.793 319.048 257.766 313.581C257.763 312.698 257.799 311.539 258.857 311.199C259.962 310.846 261.078 310.875 262.208 311.62C264.193 312.93 264.926 315.09 266.228 316.853C267.585 318.686 268.799 320.622 270.88 322.342C270.88 319.51 270.916 316.675 270.867 313.843C270.834 312.023 271.452 311.018 273.492 310.975C275.672 310.927 276.419 311.912 276.399 313.932C276.347 319.172 276.389 324.416 276.375 329.656C276.372 330.952 276.421 332.408 274.622 332.556C273.033 332.689 271.441 332.975 270.33 331.085C268.162 327.391 265.727 323.846 263.405 320.239C263.025 320.333 262.651 320.428 262.276 320.525Z" />
        
                  <path fill="#32425A" class="btm-l-p" d="M323.173 321.451C323.173 318.775 323.16 316.102 323.179 313.427C323.187 312.382 323.113 311.078 324.598 311.072C329.122 311.048 333.788 310.141 337.756 313.492C340.305 315.641 340.426 320.35 337.74 322.426C335.385 324.246 332.814 325.585 329.748 325.566C328.146 325.555 327.366 326.055 327.366 327.753C327.366 328.895 326.978 330.032 326.83 331.179C326.677 332.378 325.93 332.672 324.856 332.643C323.658 332.61 323.19 331.968 323.19 330.866C323.19 327.726 323.19 324.586 323.19 321.448C323.184 321.451 323.179 321.451 323.173 321.451ZM330.232 315.155C327.952 314.302 326.8 315.012 326.789 318.028C326.781 321.249 328.745 320.757 330.739 320.79C333.107 320.827 335.186 320.174 335.065 317.544C334.948 314.958 332.82 314.669 330.232 315.155Z" />
                  <path fill="#3BB34B" class="pf" d="M330.232 315.155C332.82 314.669 334.948 314.958 335.068 317.544C335.188 320.174 333.11 320.828 330.741 320.79C328.747 320.757 326.784 321.249 326.792 318.028C326.8 315.012 327.951 314.302 330.232 315.155Z" />
                  <path fill="#32425A" class="btm-l-o" d="M377.124 321.419C377.179 329.559 373.467 333.293 366.299 332.599C365.607 332.532 364.874 332.421 364.256 332.135C358.285 329.354 359.42 323.968 359.486 319.056C359.543 314.823 361.149 312.825 365.046 311.583C368.982 310.324 373.56 311.637 376.134 314.944C377.701 316.958 376.87 319.453 377.124 321.419ZM372.094 321.924C372.094 320.881 372.198 319.826 372.075 318.797C371.72 315.805 369.389 314.266 366.57 315.225C364.354 315.978 363.66 317.876 363.717 319.945C363.799 322.847 362.836 326.057 365.735 328.296C365.979 328.482 366.414 328.431 366.758 328.485C370.992 329.119 372.165 327.688 372.094 321.924Z" />
                  <path fill="#3BB34B" class="of" d="M372.094 321.924C372.165 327.691 370.992 329.119 366.761 328.485C366.414 328.433 365.979 328.485 365.738 328.296C362.839 326.055 363.799 322.847 363.72 319.945C363.662 317.876 364.357 315.976 366.572 315.225C369.389 314.266 371.72 315.808 372.078 318.797C372.198 319.826 372.094 320.879 372.094 321.924Z" />
                  <path fill="#32425A" class="btm-l-s" d="M404.269 332.629C402.436 332.74 400.32 332.543 398.446 331.401C397.552 330.855 396.532 330.04 397.423 328.876C398.06 328.047 398.78 326.797 400.289 327.699C402.239 328.868 404.411 328.444 406.517 328.501C407.805 328.536 408.56 327.796 408.795 326.708C409.063 325.466 408.112 324.702 407.091 324.392C405.754 323.981 404.329 323.825 402.931 323.636C399.871 323.22 398.014 321.648 397.65 318.524C397.265 315.206 398.544 312.881 401.75 311.661C404.802 310.497 407.778 310.854 410.666 312.174C411.577 312.59 412.931 313.043 412.036 314.412C411.459 315.298 410.74 316.605 409.238 315.849C407.567 315.009 405.82 314.931 404.061 315.247C403.011 315.436 401.996 315.911 401.939 317.234C401.878 318.611 402.702 319.432 403.9 319.807C404.665 320.047 405.532 319.98 406.353 320.039C411.487 320.409 413.352 322.124 413.292 326.419C413.234 330.521 410.92 332.492 406.008 332.624C405.538 332.64 405.065 332.629 404.269 332.629Z" />
                  <path fill="#32425A" class="btml-l-t2" d="M438.839 323.741C438.839 322.226 438.757 320.703 438.858 319.197C439.031 316.61 438.889 314.491 435.262 315.014C433.84 315.22 433.192 314.234 433.181 312.814C433.167 311.129 434.258 310.991 435.544 310.994C439.323 311.005 443.103 311.016 446.88 310.994C448.305 310.986 449.432 311.132 449.481 312.987C449.528 314.825 448.494 315.22 447.017 315.036C444.162 314.677 443.68 316.146 443.779 318.557C443.932 322.399 443.779 326.249 443.825 330.097C443.844 331.754 443.44 332.678 441.465 332.697C439.444 332.716 438.708 331.987 438.806 330.04C438.91 327.947 438.831 325.844 438.831 323.746C438.828 323.741 438.834 323.741 438.839 323.741Z" />
                
              </g>   
          </g> 
        </svg>
        
      </div><!--inner one-->
    </div><!--logo animaiton--> 
  <main data-barba="container" data-barba-namespace="home">  
   <p>home page</p>
 </main> 
</div> 
              
            
!

CSS

              
                html, body {
  margin: 0;
  padding: 0;
  overflow-x:hidden;
}
.transition-one, .transition-two {
  position: fixed;
  z-index: 201;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.transition-one {
  background-color: #3BB34B;
}
.transition-two {
  background-color: #32425A;
}
.animation {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #fff;
  z-index: 200;
}
.ani-logo {
  width: 320px;
}

#blab-logo {
  opacity: 0;
}
              
            
!

JS

              
                function pageTransition() {
  var tl = gsap.timeline({
    onComplete: () => {
      console.log("complete");
      animateOne.play();
    }
  });
  tl.to(".transition-one", {
    duration: 1.2,
    scaleY: 1,
    transformOrigin: "top",
    ease: Power1.easeOut
  });
  tl.to(
    ".transition-two",
    {
      duration: 1.2,
      scaleY: 1,
      transformOrigin: "top",
      ease: Power1.easeOut
    },
    "-=0.95"
  );
  tl.to(".transition-one", {
    duration: 0.6,
    scaleY: 0,
    transformOrigin: "bottom",
    ease: Power1.easeIn
  });
  tl.to(".transition-two", {
    duration: 0.6,
    scaleY: 0,
    transformOrigin: "bottom",
    ease: Power1.easeIn
  });
}
barba.init({
  sync: true,
  transitions: [
    {
      async once(data) {
        pageTransition();
      }
      // async leave(data){pageTransition();},
    }
  ]
});

var animateOne = gsap.timeline({delay: 1});
animateOne
  .to("#blab-logo", { opacity: 1, duration: 1})
  .from("#blab", { x: 100, opacity: 0, duration: 1 }, "+=1")
  .from(".pencil", { duration: 1, opacity: 0, ease: "bounce.in", y: -400 })
  .from(".green-bg", { y: 100, opacity: 0, duration: 1 })
  .from("#gb-ltr", { x: -100, opacity: 0, duration: 1 })
  .to(".animation", { duration: 2, x: "120%" }, "+=1");

              
            
!
999px

Console