Matevz Pevec

Sorry, what i meant was why is content inside .overlay visible before .overlay animation is triggered

Ok i will check thank you, i just dont understand why is content inside .overlay visible before .overlay

Hi, maybe because im working to much on the project, but i cant figure out how to finish my menu animation. the content in .overlay is visible when the animation .nav is playing. I want to achieve that the content from .overlay is visible when . overlay appears.. i know its easy fix, but im kinf of tired :))

Of course! Thank you

Here it is: https://codepen.io/peva92/pen/WNPpRpx

hi on my page: https://sharkleads.co/ im using gsap with barba js for page tranasitions. How can i achieve to noT transform logo in the page transition? So that the logo doesnt change shape. click on any link and you will se page transition. Html: <div id="layer-barba-transition"> <div class="logo-transition no-animation" style="translate: none; rotate: none; scale: none; transform: translate(0%, 100%) translate3d(0px, 0px, 0px);"> <svg width="148" height="67" viewBox="0 0 148 67" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.4402 29.6307C13.5416 29.6307 14.4365 29.562 15.1249 29.356C15.8132 29.1499 16.4328 28.9438 16.8458 28.6003C17.2588 28.2568 17.603 27.9133 17.7407 27.5011C17.8784 27.089 18.016 26.6081 18.016 26.0585C18.016 24.9594 17.4653 23.9976 16.4328 23.2419C15.4002 22.4863 13.5416 21.7306 10.9946 20.8375C9.8932 20.4254 8.72296 20.0132 7.62156 19.4636C6.52016 18.9827 5.4876 18.2958 4.59271 17.5401C3.69782 16.7844 2.94061 15.8227 2.38991 14.7235C1.8392 13.6244 1.56385 12.2504 1.56385 10.6704C1.56385 9.09038 1.8392 7.64774 2.45874 6.4112C3.07828 5.10596 3.90433 4.07551 5.00573 3.18245C6.10713 2.28939 7.41505 1.60242 8.99831 1.12154C10.5816 0.640661 12.3025 0.43457 14.23 0.43457C16.5704 0.43457 18.5667 0.709358 20.2188 1.19024C21.9398 1.67111 23.3165 2.22069 24.3491 2.83896L22.1463 8.95298C21.1826 8.47211 20.15 7.99123 18.9798 7.64774C17.8095 7.30426 16.3639 7.09817 14.7118 7.09817C12.8532 7.09817 11.5453 7.37296 10.7193 7.85383C9.8932 8.33471 9.48018 9.15907 9.48018 10.1895C9.48018 10.8078 9.61785 11.3574 9.8932 11.7696C10.1686 12.1817 10.5816 12.5939 11.1323 12.9374C11.683 13.2809 12.3025 13.6244 12.9909 13.8992C13.6793 14.1739 14.5053 14.4487 15.3314 14.7922C17.1211 15.4792 18.7044 16.0975 20.0123 16.7157C21.3202 17.334 22.4216 18.0897 23.3165 18.9827C24.2114 19.8071 24.831 20.8375 25.244 22.0054C25.657 23.1732 25.8635 24.5472 25.8635 26.1959C25.8635 29.4247 24.7621 31.8977 22.4905 33.6152C20.2188 35.4013 16.8458 36.2256 12.3025 36.2256C10.7881 36.2256 9.41134 36.157 8.17226 35.9509C6.93319 35.7448 5.83179 35.5387 4.9369 35.2639C3.97317 34.9891 3.21596 34.7143 2.52758 34.4395C1.83921 34.1647 1.2885 33.89 0.806641 33.6152L3.00944 27.5011C4.04201 28.0507 5.28108 28.5316 6.79551 29.0125C8.44761 29.4247 10.2374 29.6307 12.4402 29.6307Z" fill="#141414" /> <path d="M99.519 0.84668C104.682 0.84668 108.606 1.73974 111.359 3.59456C114.113 5.44937 115.489 8.26594 115.489 12.113C115.489 14.5174 114.939 16.5096 113.837 17.9522C112.736 19.3948 111.153 20.6314 109.019 21.5244C109.707 22.3488 110.464 23.3793 111.221 24.4784C111.979 25.5776 112.736 26.7454 113.493 27.9133C114.25 29.0811 114.939 30.3863 115.627 31.6916C116.315 32.9968 116.935 34.3021 117.554 35.5386H108.881C108.261 34.4395 107.642 33.2716 106.953 32.1038C106.265 30.9359 105.646 29.8368 104.957 28.7376C104.269 27.6385 103.58 26.608 102.961 25.6463C102.273 24.6845 101.653 23.7914 100.965 23.0358H97.1786V35.5386H89.4688V1.73974C91.1897 1.39625 92.9106 1.19016 94.7004 1.05277C96.4902 0.915376 98.0735 0.84668 99.519 0.84668ZM100.001 7.44158C99.4502 7.44158 98.9683 7.44158 98.4865 7.51028C98.0046 7.51028 97.5916 7.57897 97.2474 7.57897V16.8531H99.4502C102.341 16.8531 104.407 16.5096 105.714 15.7539C107.022 14.9982 107.573 13.8304 107.573 12.0443C107.573 10.3268 106.953 9.159 105.646 8.47203C104.338 7.78506 102.479 7.44158 100.001 7.44158Z" fill="#141414" /> <path d="M137.932 35.5385C137.243 34.4394 136.417 33.2028 135.453 31.8976C134.49 30.5924 133.526 29.2871 132.425 27.9819C131.323 26.6766 130.222 25.3714 128.983 24.2035C127.812 22.967 126.573 21.9366 125.403 20.9748V35.4698H117.693V1.25879H125.403V14.1051C127.399 12.0442 129.396 9.8459 131.461 7.5789C133.526 5.31191 135.385 3.1823 137.106 1.25879H146.261C143.92 4.00666 141.58 6.68584 139.24 9.29632C136.899 11.9068 134.421 14.4486 131.805 17.0591C134.559 19.3261 137.174 22.0739 139.721 25.1653C142.268 28.3254 144.747 31.7602 147.087 35.5385H137.932Z" fill="#141414" /> <path d="M47.6855 60.8187V65.6961H30.8203V40.4844H36.5338V60.8187H47.6855Z" fill="#141414" /> <path d="M47.3418 56.2847C47.3418 54.5672 47.6171 53.1246 48.099 51.8194C48.5809 50.5141 49.3381 49.4837 50.1641 48.6593C50.9902 47.8349 52.0227 47.148 53.1242 46.7358C54.2256 46.3236 55.3958 46.0488 56.566 46.0488C59.3195 46.0488 61.4535 46.8732 63.0368 48.5219C64.62 50.1706 65.3772 52.6437 65.3772 55.8725C65.3772 56.216 65.3772 56.5595 65.3772 56.9029C65.3772 57.2464 65.3084 57.5899 65.3084 57.9334H52.9176C53.0553 59.0325 53.5372 59.9256 54.5009 60.6126C55.4646 61.2995 56.6349 61.5743 58.2181 61.5743C59.2507 61.5743 60.2144 61.5056 61.1782 61.2995C62.1419 61.0934 62.8991 60.8874 63.5186 60.6126L64.2758 65.0092C64.0005 65.1466 63.5875 65.284 63.1056 65.4213C62.6237 65.5587 62.073 65.6961 61.4535 65.8335C60.834 65.9709 60.2144 66.0396 59.526 66.1083C58.8377 66.177 58.1493 66.2457 57.4609 66.2457C55.74 66.2457 54.2256 65.9709 52.9865 65.49C51.7474 65.0092 50.646 64.2535 49.8199 63.4291C48.9939 62.6048 48.3744 61.5056 47.9613 60.2691C47.5483 59.0325 47.3418 57.7273 47.3418 56.2847ZM60.1456 54.2238C60.1456 53.7429 60.0079 53.3307 59.9391 52.8498C59.8014 52.4376 59.5949 52.0255 59.3195 51.682C59.0442 51.3385 58.7 51.0637 58.287 50.8576C57.8739 50.6515 57.3232 50.5141 56.7037 50.5141C56.0842 50.5141 55.6023 50.6515 55.1204 50.8576C54.6386 51.0637 54.2944 51.3385 54.019 51.682C53.7437 52.0255 53.4683 52.4376 53.3307 52.8498C53.193 53.3307 53.0553 53.7429 52.9865 54.2238H60.1456Z" fill="#141414" /> <path d="M73.7068 46.0488C75.2901 46.0488 76.6668 46.2549 77.6994 46.5984C78.732 46.9419 79.6269 47.4915 80.2464 48.1784C80.8659 48.8654 81.3478 49.6898 81.6231 50.6515C81.8985 51.6133 82.0362 52.7124 82.0362 53.8803V65.1466C81.279 65.284 80.1776 65.49 78.8008 65.7648C77.424 65.9709 75.7031 66.1083 73.7757 66.1083C72.5366 66.1083 71.4352 65.9709 70.4026 65.7648C69.3701 65.5587 68.544 65.2153 67.7868 64.6657C67.0296 64.1161 66.4789 63.4978 66.1347 62.7422C65.7217 61.9178 65.584 60.9561 65.584 59.7882C65.584 58.6891 65.7905 57.7273 66.2724 56.9716C66.7542 56.216 67.3049 55.5977 68.0621 55.1168C68.8194 54.6359 69.6454 54.2925 70.678 54.0864C71.6417 53.8803 72.6743 53.7429 73.7068 53.7429C74.3952 53.7429 75.0147 53.7429 75.5654 53.8116C76.1161 53.8803 76.5292 53.949 76.8733 54.0177V53.5368C76.8733 52.6437 76.598 51.8881 76.0473 51.3385C75.4966 50.7889 74.5329 50.5141 73.1561 50.5141C72.2612 50.5141 71.2975 50.5828 70.4026 50.7202C69.5077 50.8576 68.7505 51.0637 68.0621 51.2698L67.3738 46.8732C67.7179 46.8045 68.0621 46.6671 68.544 46.5297C69.0259 46.3923 69.5077 46.3236 70.0584 46.2549C70.6091 46.1862 71.2287 46.1175 71.8482 46.0488C72.4677 46.1175 73.0873 46.0488 73.7068 46.0488ZM74.1887 61.9178C74.7394 61.9178 75.2212 61.9178 75.7031 61.9178C76.185 61.9178 76.598 61.8491 76.8733 61.7804V57.6586C76.6668 57.5899 76.3226 57.5899 75.9096 57.5212C75.4966 57.4525 75.0836 57.4525 74.6705 57.4525C74.1887 57.4525 73.7068 57.4525 73.225 57.5212C72.7431 57.5899 72.3989 57.7273 72.0547 57.8647C71.7105 58.0021 71.4352 58.2769 71.2287 58.5517C71.0222 58.8264 70.9533 59.2386 70.9533 59.6508C70.9533 60.4752 71.2287 61.0934 71.7794 61.4369C72.3989 61.7804 73.1561 61.9178 74.1887 61.9178Z" fill="#141414" /> <path d="M101.173 65.0781C100.691 65.2155 100.141 65.3529 99.5211 65.4902C98.9015 65.6276 98.2131 65.765 97.5248 65.8337C96.8364 65.9024 96.148 66.0398 95.3908 66.0398C94.7024 66.1085 94.0141 66.1085 93.3257 66.1085C91.7424 66.1085 90.3657 65.9024 89.0577 65.4215C87.7498 64.9407 86.7861 64.3224 85.8912 63.4293C85.0652 62.605 84.3768 61.5058 83.9638 60.2693C83.4819 59.0327 83.2754 57.6588 83.2754 56.1475C83.2754 54.5674 83.4819 53.1935 83.8261 51.957C84.2391 50.7204 84.7898 49.6213 85.4782 48.7969C86.1666 47.9725 87.1303 47.2856 88.1629 46.8047C89.1954 46.3238 90.4345 46.1177 91.8112 46.1177C92.5685 46.1177 93.2568 46.1864 93.8075 46.3238C94.4271 46.4612 94.9778 46.6673 95.5973 46.9421V38.355L101.035 37.4619V65.0781H101.173ZM88.9201 56.0101C88.9201 57.6588 89.2643 59.0327 90.0215 60.0632C90.7787 61.0936 91.8801 61.5745 93.3945 61.5745C93.8764 61.5745 94.3582 61.5745 94.7713 61.5058C95.1843 61.5058 95.5285 61.4371 95.8038 61.3684V51.5448C95.4596 51.3387 95.0466 51.1326 94.4959 50.9952C93.9452 50.8578 93.3945 50.7891 92.8438 50.7891C90.1591 50.7891 88.9201 52.5065 88.9201 56.0101Z" fill="#141414" /> <path d="M109.089 61.8498C110.121 61.8498 110.81 61.7811 111.223 61.575C111.636 61.3689 111.842 61.0254 111.842 60.4758C111.842 60.0636 111.567 59.6515 111.016 59.308C110.466 58.9645 109.64 58.621 108.607 58.2088C107.781 57.8653 106.955 57.5905 106.267 57.2471C105.578 56.9036 104.959 56.4914 104.477 56.0105C103.995 55.5296 103.651 54.9801 103.375 54.2931C103.1 53.6061 102.962 52.8505 102.962 51.9574C102.962 50.1713 103.651 48.7286 104.959 47.6982C106.267 46.6677 108.125 46.1182 110.466 46.1182C111.636 46.1182 112.737 46.2556 113.839 46.4616C114.871 46.6677 115.766 46.8738 116.386 47.1486L115.422 51.4078C114.802 51.2017 114.114 50.9956 113.357 50.8583C112.6 50.7209 111.774 50.5835 110.879 50.5835C109.158 50.5835 108.332 51.0643 108.332 52.0261C108.332 52.2322 108.332 52.4383 108.469 52.5757C108.607 52.7131 108.676 52.9192 108.882 53.0565C109.089 53.1939 109.433 53.4 109.777 53.6061C110.121 53.8122 110.603 54.0183 111.223 54.2244C112.393 54.6366 113.426 55.1175 114.183 55.5296C114.94 55.9418 115.56 56.4227 116.041 56.9036C116.523 57.3845 116.799 57.934 117.005 58.5523C117.212 59.1706 117.281 59.8575 117.281 60.6819C117.281 62.6054 116.592 63.9794 115.147 64.9411C113.701 65.9029 111.705 66.3837 109.089 66.3837C107.368 66.3837 105.991 66.2464 104.821 65.9716C103.72 65.6968 102.893 65.422 102.48 65.2159L103.375 60.8193C104.27 61.1628 105.234 61.5063 106.198 61.6437C107.161 61.7811 108.125 61.8498 109.089 61.8498Z" fill="#141414" /> <path d="M53.8799 35.5385H53.7422C53.7422 35.5385 54.4994 35.5385 55.532 35.3324V1.25879H47.7533V14.3799H34.8119V1.25879H27.0332V35.5385H34.743V20.9748H47.7533V35.5385H53.8799Z" fill="#141414" /> <path d="M86.2342 25.3027C85.064 22.1426 83.9626 19.1887 82.7923 16.4408C81.6221 13.6929 80.5895 11.0137 79.4881 8.54066C78.3867 6.06757 77.2853 3.59448 76.1839 1.25879H68.8183C67.6481 3.66318 66.5467 6.06757 65.4453 8.54066C64.3439 11.0137 63.2425 13.6929 62.1411 16.4408C61.0397 19.1887 59.8694 22.1426 58.6992 25.3027C57.5289 28.3941 56.3587 31.7602 55.0508 35.4011C56.634 35.1264 59.181 34.4394 60.6266 32.6533C69.1625 18.2269 81.9663 15.1356 81.9663 15.1356C78.5932 20.4939 78.3867 25.9897 78.3867 25.9897L76.7346 27.1575L78.3179 28.0506C78.2491 29.6306 78.3179 31.1419 78.4556 32.5159C78.9374 33.0655 79.6258 33.6837 80.5895 34.302C82.104 35.1951 83.5495 35.4698 84.7198 35.6072H89.9514C88.6435 31.8289 87.4045 28.3941 86.2342 25.3027Z" fill="#141414" /> </svg> </div> </div> JS: function pagetransition() { var tl = gsap.timeline(); // Set the initial scaleY of the inner logo to 1 gsap.set(".logo-transition", { scaleY: 1 }); tl.to("#layer-barba-transition", { duration: 0.9, scaleY: 1, transformOrigin: 'top', ease: Power3.easeInOut, }); // Add a delay to give time for the scaling animation to finish tl.add(delay(700), 0); // 700ms delay to match the scaleY animation duration // Scale the outer div to 0 tl.to("#layer-barba-transition", { duration: 0.7, scaleY: 0, transformOrigin: 'bottom', ease: Power3.easeInOut, delay: 0 }); // Set the scaleY of the inner logo back to 0 tl.set(".logo-transition", { scaleY: 0 }); } // Function to Delay function delay(n) { n = n || 1000; return new Promise(done => { setTimeout(() => { done(); }, n); }); } // Initial Content Animation function contentAnimation() { var tl = gsap.timeline(); tl.from(".left", { x: -200, y: 0, duration: 1, ease: Power3.easeInOut, opacity: 0 }); }