<section class="supt-section-text-big-homepage">
<div class="supt-section-text-big-homepage__wrapper">
<span class="supt-section-text-big-homepage__line-wrapper">
<span class="supt-section-text-big-homepage__line -first">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-text-big-homepage__line__glow">
<g filter="url(#supt-line-filter-glow)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
</svg>
</span>
</span>
<div class="supt-section-text-big-homepage__inner">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 offset-md-2">
<div class="supt-section-text-big-homepage__content">
<div class="supt-section-text-big-homepage__star">
<div class="supt-section-text-big-homepage__star__inner">
<svg width="104" height="104" viewbox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" class="-is-default">
<path opacity="0.8" d="M86.4927 46.6387C86.4553 45.4918 86.2559 44.3512 85.8945 43.2601C85.5393 42.169 85.0284 41.1275 84.3803 40.179C83.7759 39.2862 83.0468 38.4803 82.2306 37.7736C80.3986 36.1989 78.6726 35.6658 76.3857 35.2194C75.3264 35.0149 74.2671 34.8351 73.2203 34.5561C72.1672 34.2771 71.1764 33.899 70.2106 33.403C69.4878 33.031 68.7899 32.6033 68.1294 32.1259C67.4689 31.6486 66.8458 31.1216 66.2663 30.5513C65.4874 29.7888 64.8206 28.9704 64.2287 28.0591C63.643 27.154 63.1445 26.2055 62.621 25.2694C61.487 23.2422 60.4464 21.7729 58.3714 20.5268C57.4429 19.9689 56.4459 19.5349 55.4116 19.2374C54.3024 18.9212 53.1496 18.76 51.9969 18.76C50.8441 18.76 49.6913 18.9212 48.5822 19.2374C47.5416 19.5349 46.5446 19.9689 45.6224 20.5268C43.5536 21.7729 42.5068 23.2422 41.379 25.2694C40.8555 26.2055 40.357 27.1602 39.7713 28.0591C39.1793 28.9642 38.5126 29.7888 37.7337 30.5513C37.1542 31.1216 36.5311 31.6486 35.8706 32.1259C35.2101 32.6033 34.5184 33.031 33.7894 33.403C32.8236 33.9052 31.8266 34.2771 30.7797 34.5561C29.7329 34.8351 28.6736 35.0087 27.6143 35.2194C25.3274 35.6658 23.6014 36.1989 21.7694 37.7736C20.9532 38.4803 20.2241 39.2862 19.6197 40.179C18.9716 41.1275 18.4607 42.169 18.1055 43.2601C17.7503 44.3512 17.5447 45.4918 17.5073 46.6387C17.4699 47.7112 17.5759 48.7961 17.8251 49.8438C18.3734 52.1872 19.4577 53.6255 21.0466 55.3241C21.7819 56.1114 22.5359 56.874 23.2151 57.7109C23.9005 58.554 24.48 59.4343 24.966 60.4076C25.3274 61.1329 25.639 61.8831 25.8945 62.658C26.15 63.4329 26.3431 64.2203 26.474 65.02C26.6547 66.0863 26.7045 67.1464 26.6485 68.2251C26.5924 69.2976 26.4304 70.3577 26.2995 71.424C26.0191 73.7239 25.9942 75.528 26.9351 77.7412C27.3526 78.7331 27.9072 79.6692 28.5677 80.5185C29.278 81.4236 30.113 82.2295 31.0477 82.9053C31.9823 83.581 33.0105 84.1203 34.0947 84.5109C35.1104 84.8767 36.1759 85.1123 37.2539 85.199C39.6654 85.4036 41.379 84.8271 43.4913 83.8476C44.4696 83.395 45.4355 82.9177 46.4449 82.5333C47.4606 82.1427 48.4887 81.87 49.5605 81.7088C50.3643 81.591 51.1806 81.529 51.9969 81.529C52.8132 81.529 53.6294 81.591 54.4333 81.7088C55.5113 81.87 56.5394 82.1427 57.5551 82.5333C58.5646 82.9177 59.5304 83.395 60.5087 83.8476C62.621 84.8271 64.3346 85.4036 66.7461 85.199C67.8241 85.106 68.8896 84.8767 69.9053 84.5109C70.9895 84.1203 72.0177 83.5748 72.9523 82.8991C73.887 82.2233 74.722 81.4174 75.4323 80.5123C76.0991 79.663 76.6474 78.7269 77.0649 77.735C78.0058 75.5156 77.9809 73.7177 77.7005 71.4178C77.5696 70.3515 77.4139 69.2914 77.3516 68.2189C77.2955 67.1402 77.3516 66.0801 77.526 65.0138C77.6569 64.2141 77.8563 63.4205 78.1055 62.6518C78.3548 61.8831 78.6663 61.1267 79.034 60.4014C79.52 59.4343 80.0995 58.5478 80.7849 57.7047C81.4641 56.8678 82.2181 56.1052 82.9534 55.3179C84.5361 53.6193 85.6266 52.1748 86.1749 49.8376C86.4242 48.7899 86.5301 47.7112 86.4927 46.6325V46.6387ZM51.9969 73.0234C41.5721 73.0234 33.1164 64.617 33.1164 54.2392C33.1164 43.8614 41.5659 35.455 51.9969 35.455C62.4279 35.455 70.8774 43.8614 70.8774 54.2392C70.8774 64.617 62.4279 73.0234 51.9969 73.0234Z" fill="#66000E" />
<path opacity="0.8" d="M51.9979 70.835C61.207 70.835 68.6725 63.4076 68.6725 54.2454C68.6725 45.0832 61.207 37.6558 51.9979 37.6558C42.7887 37.6558 35.3232 45.0832 35.3232 54.2454C35.3232 63.4076 42.7887 70.835 51.9979 70.835Z" fill="#66000E" />
</svg>
<img src="/sites/gv/files/flmngr/superhuit/homepage/glow-star.png" class="-is-glow" />
<svg width="104" height="104" viewbox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" class="-is-glow-brighter">
<path opacity="0.8" d="M86.4927 46.6387C86.4553 45.4918 86.2559 44.3512 85.8945 43.2601C85.5393 42.169 85.0284 41.1275 84.3803 40.179C83.7759 39.2862 83.0468 38.4803 82.2306 37.7736C80.3986 36.1989 78.6726 35.6658 76.3857 35.2194C75.3264 35.0149 74.2671 34.8351 73.2203 34.5561C72.1672 34.2771 71.1764 33.899 70.2106 33.403C69.4878 33.031 68.7899 32.6033 68.1294 32.1259C67.4689 31.6486 66.8458 31.1216 66.2663 30.5513C65.4874 29.7888 64.8206 28.9704 64.2287 28.0591C63.643 27.154 63.1445 26.2055 62.621 25.2694C61.487 23.2422 60.4464 21.7729 58.3714 20.5268C57.4429 19.9689 56.4459 19.5349 55.4116 19.2374C54.3024 18.9212 53.1496 18.76 51.9969 18.76C50.8441 18.76 49.6913 18.9212 48.5822 19.2374C47.5416 19.5349 46.5446 19.9689 45.6224 20.5268C43.5536 21.7729 42.5068 23.2422 41.379 25.2694C40.8555 26.2055 40.357 27.1602 39.7713 28.0591C39.1793 28.9642 38.5126 29.7888 37.7337 30.5513C37.1542 31.1216 36.5311 31.6486 35.8706 32.1259C35.2101 32.6033 34.5184 33.031 33.7894 33.403C32.8236 33.9052 31.8266 34.2771 30.7797 34.5561C29.7329 34.8351 28.6736 35.0087 27.6143 35.2194C25.3274 35.6658 23.6014 36.1989 21.7694 37.7736C20.9532 38.4803 20.2241 39.2862 19.6197 40.179C18.9716 41.1275 18.4607 42.169 18.1055 43.2601C17.7503 44.3512 17.5447 45.4918 17.5073 46.6387C17.4699 47.7112 17.5759 48.7961 17.8251 49.8438C18.3734 52.1872 19.4577 53.6255 21.0466 55.3241C21.7819 56.1114 22.5359 56.874 23.2151 57.7109C23.9005 58.554 24.48 59.4343 24.966 60.4076C25.3274 61.1329 25.639 61.8831 25.8945 62.658C26.15 63.4329 26.3431 64.2203 26.474 65.02C26.6547 66.0863 26.7045 67.1464 26.6485 68.2251C26.5924 69.2976 26.4304 70.3577 26.2995 71.424C26.0191 73.7239 25.9942 75.528 26.9351 77.7412C27.3526 78.7331 27.9072 79.6692 28.5677 80.5185C29.278 81.4236 30.113 82.2295 31.0477 82.9053C31.9823 83.581 33.0105 84.1203 34.0947 84.5109C35.1104 84.8767 36.1759 85.1123 37.2539 85.199C39.6654 85.4036 41.379 84.8271 43.4913 83.8476C44.4696 83.395 45.4355 82.9177 46.4449 82.5333C47.4606 82.1427 48.4887 81.87 49.5605 81.7088C50.3643 81.591 51.1806 81.529 51.9969 81.529C52.8132 81.529 53.6294 81.591 54.4333 81.7088C55.5113 81.87 56.5394 82.1427 57.5551 82.5333C58.5646 82.9177 59.5304 83.395 60.5087 83.8476C62.621 84.8271 64.3346 85.4036 66.7461 85.199C67.8241 85.106 68.8896 84.8767 69.9053 84.5109C70.9895 84.1203 72.0177 83.5748 72.9523 82.8991C73.887 82.2233 74.722 81.4174 75.4323 80.5123C76.0991 79.663 76.6474 78.7269 77.0649 77.735C78.0058 75.5156 77.9809 73.7177 77.7005 71.4178C77.5696 70.3515 77.4139 69.2914 77.3516 68.2189C77.2955 67.1402 77.3516 66.0801 77.526 65.0138C77.6569 64.2141 77.8563 63.4205 78.1055 62.6518C78.3548 61.8831 78.6663 61.1267 79.034 60.4014C79.52 59.4343 80.0995 58.5478 80.7849 57.7047C81.4641 56.8678 82.2181 56.1052 82.9534 55.3179C84.5361 53.6193 85.6266 52.1748 86.1749 49.8376C86.4242 48.7899 86.5301 47.7112 86.4927 46.6325V46.6387ZM51.9969 73.0234C41.5721 73.0234 33.1164 64.617 33.1164 54.2392C33.1164 43.8614 41.5659 35.455 51.9969 35.455C62.4279 35.455 70.8774 43.8614 70.8774 54.2392C70.8774 64.617 62.4279 73.0234 51.9969 73.0234Z" fill="#fff" />
<path opacity="0.8" d="M51.9979 70.835C61.207 70.835 68.6725 63.4076 68.6725 54.2454C68.6725 45.0832 61.207 37.6558 51.9979 37.6558C42.7887 37.6558 35.3232 45.0832 35.3232 54.2454C35.3232 63.4076 42.7887 70.835 51.9979 70.835Z" fill="#fff" />
</svg>
</div>
</div>
<h2 class="supt-section-text-big-homepage__title">
We are people protecting people, enabled by technology
</h2>
</div>
</div>
</div>
</div>
</div>
<span class="supt-section-text-big-homepage__line-wrapper">
<span class="supt-section-text-big-homepage__line -last">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-text-big-homepage__line__glow">
<g filter=" url(#supt-line-filter-glow)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
</svg>
</span>
</span>
</div>
</section>
No notes defined.
<section class="supt-section-text-big-homepage">
<div class="supt-section-text-big-homepage__wrapper">
<span class="supt-section-text-big-homepage__line-wrapper">
<span class="supt-section-text-big-homepage__line -first">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-text-big-homepage__line__glow">
<g filter="url(#supt-line-filter-glow)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/>
</g>
</svg>
</span>
</span>
<div class="supt-section-text-big-homepage__inner">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 offset-md-2">
<div class="supt-section-text-big-homepage__content">
<div class="supt-section-text-big-homepage__star">
<div class="supt-section-text-big-homepage__star__inner">
<svg width="104" height="104" viewbox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" class="-is-default">
<path opacity="0.8" d="M86.4927 46.6387C86.4553 45.4918 86.2559 44.3512 85.8945 43.2601C85.5393 42.169 85.0284 41.1275 84.3803 40.179C83.7759 39.2862 83.0468 38.4803 82.2306 37.7736C80.3986 36.1989 78.6726 35.6658 76.3857 35.2194C75.3264 35.0149 74.2671 34.8351 73.2203 34.5561C72.1672 34.2771 71.1764 33.899 70.2106 33.403C69.4878 33.031 68.7899 32.6033 68.1294 32.1259C67.4689 31.6486 66.8458 31.1216 66.2663 30.5513C65.4874 29.7888 64.8206 28.9704 64.2287 28.0591C63.643 27.154 63.1445 26.2055 62.621 25.2694C61.487 23.2422 60.4464 21.7729 58.3714 20.5268C57.4429 19.9689 56.4459 19.5349 55.4116 19.2374C54.3024 18.9212 53.1496 18.76 51.9969 18.76C50.8441 18.76 49.6913 18.9212 48.5822 19.2374C47.5416 19.5349 46.5446 19.9689 45.6224 20.5268C43.5536 21.7729 42.5068 23.2422 41.379 25.2694C40.8555 26.2055 40.357 27.1602 39.7713 28.0591C39.1793 28.9642 38.5126 29.7888 37.7337 30.5513C37.1542 31.1216 36.5311 31.6486 35.8706 32.1259C35.2101 32.6033 34.5184 33.031 33.7894 33.403C32.8236 33.9052 31.8266 34.2771 30.7797 34.5561C29.7329 34.8351 28.6736 35.0087 27.6143 35.2194C25.3274 35.6658 23.6014 36.1989 21.7694 37.7736C20.9532 38.4803 20.2241 39.2862 19.6197 40.179C18.9716 41.1275 18.4607 42.169 18.1055 43.2601C17.7503 44.3512 17.5447 45.4918 17.5073 46.6387C17.4699 47.7112 17.5759 48.7961 17.8251 49.8438C18.3734 52.1872 19.4577 53.6255 21.0466 55.3241C21.7819 56.1114 22.5359 56.874 23.2151 57.7109C23.9005 58.554 24.48 59.4343 24.966 60.4076C25.3274 61.1329 25.639 61.8831 25.8945 62.658C26.15 63.4329 26.3431 64.2203 26.474 65.02C26.6547 66.0863 26.7045 67.1464 26.6485 68.2251C26.5924 69.2976 26.4304 70.3577 26.2995 71.424C26.0191 73.7239 25.9942 75.528 26.9351 77.7412C27.3526 78.7331 27.9072 79.6692 28.5677 80.5185C29.278 81.4236 30.113 82.2295 31.0477 82.9053C31.9823 83.581 33.0105 84.1203 34.0947 84.5109C35.1104 84.8767 36.1759 85.1123 37.2539 85.199C39.6654 85.4036 41.379 84.8271 43.4913 83.8476C44.4696 83.395 45.4355 82.9177 46.4449 82.5333C47.4606 82.1427 48.4887 81.87 49.5605 81.7088C50.3643 81.591 51.1806 81.529 51.9969 81.529C52.8132 81.529 53.6294 81.591 54.4333 81.7088C55.5113 81.87 56.5394 82.1427 57.5551 82.5333C58.5646 82.9177 59.5304 83.395 60.5087 83.8476C62.621 84.8271 64.3346 85.4036 66.7461 85.199C67.8241 85.106 68.8896 84.8767 69.9053 84.5109C70.9895 84.1203 72.0177 83.5748 72.9523 82.8991C73.887 82.2233 74.722 81.4174 75.4323 80.5123C76.0991 79.663 76.6474 78.7269 77.0649 77.735C78.0058 75.5156 77.9809 73.7177 77.7005 71.4178C77.5696 70.3515 77.4139 69.2914 77.3516 68.2189C77.2955 67.1402 77.3516 66.0801 77.526 65.0138C77.6569 64.2141 77.8563 63.4205 78.1055 62.6518C78.3548 61.8831 78.6663 61.1267 79.034 60.4014C79.52 59.4343 80.0995 58.5478 80.7849 57.7047C81.4641 56.8678 82.2181 56.1052 82.9534 55.3179C84.5361 53.6193 85.6266 52.1748 86.1749 49.8376C86.4242 48.7899 86.5301 47.7112 86.4927 46.6325V46.6387ZM51.9969 73.0234C41.5721 73.0234 33.1164 64.617 33.1164 54.2392C33.1164 43.8614 41.5659 35.455 51.9969 35.455C62.4279 35.455 70.8774 43.8614 70.8774 54.2392C70.8774 64.617 62.4279 73.0234 51.9969 73.0234Z" fill="#66000E"/>
<path opacity="0.8" d="M51.9979 70.835C61.207 70.835 68.6725 63.4076 68.6725 54.2454C68.6725 45.0832 61.207 37.6558 51.9979 37.6558C42.7887 37.6558 35.3232 45.0832 35.3232 54.2454C35.3232 63.4076 42.7887 70.835 51.9979 70.835Z" fill="#66000E"/>
</svg>
<img src="{{ path('/sites/gv/files/flmngr/superhuit/homepage/glow-star.png') }}" class="-is-glow"/>
<svg width="104" height="104" viewbox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg" class="-is-glow-brighter">
<path opacity="0.8" d="M86.4927 46.6387C86.4553 45.4918 86.2559 44.3512 85.8945 43.2601C85.5393 42.169 85.0284 41.1275 84.3803 40.179C83.7759 39.2862 83.0468 38.4803 82.2306 37.7736C80.3986 36.1989 78.6726 35.6658 76.3857 35.2194C75.3264 35.0149 74.2671 34.8351 73.2203 34.5561C72.1672 34.2771 71.1764 33.899 70.2106 33.403C69.4878 33.031 68.7899 32.6033 68.1294 32.1259C67.4689 31.6486 66.8458 31.1216 66.2663 30.5513C65.4874 29.7888 64.8206 28.9704 64.2287 28.0591C63.643 27.154 63.1445 26.2055 62.621 25.2694C61.487 23.2422 60.4464 21.7729 58.3714 20.5268C57.4429 19.9689 56.4459 19.5349 55.4116 19.2374C54.3024 18.9212 53.1496 18.76 51.9969 18.76C50.8441 18.76 49.6913 18.9212 48.5822 19.2374C47.5416 19.5349 46.5446 19.9689 45.6224 20.5268C43.5536 21.7729 42.5068 23.2422 41.379 25.2694C40.8555 26.2055 40.357 27.1602 39.7713 28.0591C39.1793 28.9642 38.5126 29.7888 37.7337 30.5513C37.1542 31.1216 36.5311 31.6486 35.8706 32.1259C35.2101 32.6033 34.5184 33.031 33.7894 33.403C32.8236 33.9052 31.8266 34.2771 30.7797 34.5561C29.7329 34.8351 28.6736 35.0087 27.6143 35.2194C25.3274 35.6658 23.6014 36.1989 21.7694 37.7736C20.9532 38.4803 20.2241 39.2862 19.6197 40.179C18.9716 41.1275 18.4607 42.169 18.1055 43.2601C17.7503 44.3512 17.5447 45.4918 17.5073 46.6387C17.4699 47.7112 17.5759 48.7961 17.8251 49.8438C18.3734 52.1872 19.4577 53.6255 21.0466 55.3241C21.7819 56.1114 22.5359 56.874 23.2151 57.7109C23.9005 58.554 24.48 59.4343 24.966 60.4076C25.3274 61.1329 25.639 61.8831 25.8945 62.658C26.15 63.4329 26.3431 64.2203 26.474 65.02C26.6547 66.0863 26.7045 67.1464 26.6485 68.2251C26.5924 69.2976 26.4304 70.3577 26.2995 71.424C26.0191 73.7239 25.9942 75.528 26.9351 77.7412C27.3526 78.7331 27.9072 79.6692 28.5677 80.5185C29.278 81.4236 30.113 82.2295 31.0477 82.9053C31.9823 83.581 33.0105 84.1203 34.0947 84.5109C35.1104 84.8767 36.1759 85.1123 37.2539 85.199C39.6654 85.4036 41.379 84.8271 43.4913 83.8476C44.4696 83.395 45.4355 82.9177 46.4449 82.5333C47.4606 82.1427 48.4887 81.87 49.5605 81.7088C50.3643 81.591 51.1806 81.529 51.9969 81.529C52.8132 81.529 53.6294 81.591 54.4333 81.7088C55.5113 81.87 56.5394 82.1427 57.5551 82.5333C58.5646 82.9177 59.5304 83.395 60.5087 83.8476C62.621 84.8271 64.3346 85.4036 66.7461 85.199C67.8241 85.106 68.8896 84.8767 69.9053 84.5109C70.9895 84.1203 72.0177 83.5748 72.9523 82.8991C73.887 82.2233 74.722 81.4174 75.4323 80.5123C76.0991 79.663 76.6474 78.7269 77.0649 77.735C78.0058 75.5156 77.9809 73.7177 77.7005 71.4178C77.5696 70.3515 77.4139 69.2914 77.3516 68.2189C77.2955 67.1402 77.3516 66.0801 77.526 65.0138C77.6569 64.2141 77.8563 63.4205 78.1055 62.6518C78.3548 61.8831 78.6663 61.1267 79.034 60.4014C79.52 59.4343 80.0995 58.5478 80.7849 57.7047C81.4641 56.8678 82.2181 56.1052 82.9534 55.3179C84.5361 53.6193 85.6266 52.1748 86.1749 49.8376C86.4242 48.7899 86.5301 47.7112 86.4927 46.6325V46.6387ZM51.9969 73.0234C41.5721 73.0234 33.1164 64.617 33.1164 54.2392C33.1164 43.8614 41.5659 35.455 51.9969 35.455C62.4279 35.455 70.8774 43.8614 70.8774 54.2392C70.8774 64.617 62.4279 73.0234 51.9969 73.0234Z" fill="#fff"/>
<path opacity="0.8" d="M51.9979 70.835C61.207 70.835 68.6725 63.4076 68.6725 54.2454C68.6725 45.0832 61.207 37.6558 51.9979 37.6558C42.7887 37.6558 35.3232 45.0832 35.3232 54.2454C35.3232 63.4076 42.7887 70.835 51.9979 70.835Z" fill="#fff"/>
</svg>
</div>
</div>
<h2 class="supt-section-text-big-homepage__title">
We are people protecting people, enabled by technology
</h2>
</div>
</div>
</div>
</div>
</div>
<span class="supt-section-text-big-homepage__line-wrapper">
<span class="supt-section-text-big-homepage__line -last">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-text-big-homepage__line__glow">
<g filter=" url(#supt-line-filter-glow)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/>
</g>
</svg>
</span>
</span>
</div>
</section>
/* No context defined. */
import { animate, createTimeline, onScroll, stagger } from 'animejs';
const STAR_SCALE = 130 / 200;
export class SectionTextBigHomepage {
$element: Element;
$lines: NodeListOf<HTMLElement>;
$linesGlow: NodeListOf<HTMLElement>;
$linesWrapper: HTMLElement;
$star: HTMLElement;
$starGlow: HTMLElement;
$starGlowBrighter: HTMLElement;
$title: HTMLElement;
$content: HTMLElement;
titleHeight: number = 0;
lineScale: number = 0;
linesAreScaledDown: boolean = false;
isFirstTime: boolean = true;
titleResizeObserver!: ResizeObserver;
strokeLength: number = 0;
constructor($element: Element) {
this.$element = $element;
this.$content = $element.querySelector(
'.supt-section-text-big-homepage__content'
) as HTMLElement;
this.$linesWrapper = $element.querySelector(
'.supt-section-text-big-homepage__line-wrapper'
) as HTMLElement;
this.$lines = $element.querySelectorAll(
'.supt-section-text-big-homepage__line'
) as NodeListOf<HTMLElement>;
this.$linesGlow = $element.querySelectorAll(
'.supt-section-text-big-homepage__line__glow'
) as NodeListOf<HTMLElement>;
this.$star = $element.querySelector('.supt-section-text-big-homepage__star') as HTMLElement;
this.$starGlow = this.$star.querySelector('.-is-glow') as HTMLElement;
this.$starGlowBrighter = this.$star.querySelector('.-is-glow-brighter') as HTMLElement;
this.$title = this.$element.querySelector(
'.supt-section-text-big-homepage__title'
) as HTMLElement;
this.linesAreScaledDown = false;
this.bindEvents();
this.setupTitleResizeObserver();
this.splitTitle();
this.setLineStrokeDashoffset();
}
bindEvents() {
window.addEventListener('resize', this.handleResize.bind(this));
}
/**
* Calculate size of the title when it resizes
*/
setupTitleResizeObserver() {
this.titleResizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
if (entry.target === this.$title) {
this.handleResize();
if (this.isFirstTime) {
this.isFirstTime = false;
this.handleScrollAnimation();
}
}
}
});
this.titleResizeObserver.observe(this.$title);
}
setLineStrokeDashoffset() {
this.strokeLength = Math.max(this.$linesWrapper.offsetHeight / 1.2, 250);
this.$linesGlow.forEach(line => {
line.style.strokeDasharray = `${this.strokeLength}`;
});
}
/**
* Split title into words and add glow class to each word
*/
splitTitle() {
const title = this.$title.textContent || '';
this.$title.innerHTML = title
.split(' ')
.map(
word =>
`<span class="supt-section-text-big-homepage__title__word"><span class="-is-default">${word}</span><span class="-is-glow" aria-hidden="true">${word}</span></span>`
)
.join(' ');
}
getFinalSizes() {
this.titleHeight = this.$title.clientHeight;
const lineHeight = this.$lines[0].clientHeight;
const lineSpaceLess = this.titleHeight / 2;
this.lineScale = (lineHeight - lineSpaceLess) / lineHeight;
}
handleScrollAnimation() {
// 1st line glow
animate(this.$linesGlow[0], {
strokeDashoffset: [this.strokeLength, 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center top',
leave: 'center 15%',
sync: true,
}),
});
// glow star fadeIn/Out
onScroll({
container: document.body,
target: this.$element,
enter: 'center 15%',
onEnter: () => {
animate(this.$starGlow, {
opacity: 1,
duration: 500,
});
},
onLeave: () => {
animate(this.$starGlow, {
opacity: 0,
duration: 500,
});
},
});
// Add title timeline (create space for the title and display it)
createTimeline({
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center 15%',
leave: 'center 33%',
sync: true,
}),
})
// glow star scale
.add(
this.$star,
{
scale: [1, STAR_SCALE],
ease: 'linear',
},
0
)
// content translateY
.add(
this.$content,
{
translateY: [0, (-1 * this.titleHeight) / 2],
ease: 'linear',
},
0
)
// lines scale down to let enough space for the title
.add(
this.$lines,
{
scaleY: [1, this.lineScale],
translateX: ['-50%', '-50%'],
ease: 'linear',
},
0
)
// title fadeIn
.add(
this.$title,
{
opacity: [0, 1],
ease: 'linear',
duration: 500,
},
'<-=500'
);
// // Rotate star
// animate(this.$star.children, {
// rotate: [0, (360 / 5) * 2],
// ease: 'inOut(1)',
// duration: 500,
// autoplay: onScroll({
// container: document.body,
// target: this.$element,
// enter: 'center 33%',
// sync: 'play play reverse reverse',
// }),
// });
// Track lines scaled down state (to know when to scale down the lines and content on resize)
onScroll({
container: document.body,
target: this.$element,
enter: 'center 33%',
onEnter: () => {
this.linesAreScaledDown = true;
},
onLeave: () => {
this.linesAreScaledDown = false;
},
});
// title glow fadeIn (word by word)
const $glowWords = this.$title.querySelectorAll(
'.supt-section-text-big-homepage__title__word .-is-glow'
) as NodeListOf<HTMLElement>;
animate($glowWords, {
opacity: [0, 1],
duration: 500,
ease: 'linear',
delay: stagger(200),
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center 35%',
leave: 'center 58%',
sync: true,
}),
});
// star glow fadeIn
animate(this.$starGlowBrighter, {
opacity: [0, 1],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center 35%',
leave: 'center 58%',
sync: true,
}),
});
// 2nd line glow
animate(this.$linesGlow[1], {
strokeDashoffset: [this.strokeLength, 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center 58%',
leave: 'bottom bottom',
sync: true,
}),
});
}
handleResize() {
this.getFinalSizes();
if (this.linesAreScaledDown) {
animate(this.$lines, {
scaleY: this.lineScale,
translateX: ['-50%', '-50%'],
ease: 'linear',
duration: 250,
});
animate(this.$content, {
translateY: (-1 * this.titleHeight) / 2,
ease: 'linear',
duration: 250,
});
}
}
}
.supt-section-text-big-homepage {
height: 200vh;
&__wrapper {
height: 100vh;
/* @extend %gradiant-corpo; */
position: sticky;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
&__inner {
width: 100%;
padding: $spacing-12 0;
}
&__content {
position: relative;
}
&__star {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
transform-origin: top;
&__inner {
position: absolute;
inset: 0;
/* transform-origin: 50% 50%; */
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.-is-glow {
opacity: 0;
}
&.-is-glow-brighter {
opacity: 0;
filter: drop-shadow(0 0 34px rgb(255 255 255 / 50%))
drop-shadow(0 0 44px rgb(255 255 255 / 50%))
drop-shadow(0 0 54px rgb(255 255 255 / 50%));
}
}
}
}
&__title {
@extend %t-h1;
color: $color-new;
text-align: center;
margin: 0;
padding-top: 8px;
position: absolute;
width: 100%;
left: 0;
opacity: 0;
&__word {
position: relative;
display: inline-block;
.-is-default {
display: block;
opacity: 0.5;
}
.-is-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
color: $color-white;
text-shadow: $text-shadow-glow;
}
}
}
&__line-wrapper {
position: relative;
width: 100%;
height: 100%;
}
&__line {
position: relative;
display: block;
width: 1px;
height: 100%;
background-color: $color-new;
left: 50%;
transform: translateX(-50%);
&__glow {
position: absolute;
top: 0;
left: calc(-50% + 1px);
width: auto;
height: 100%;
transform-origin: top;
overflow: visible;
transform: scaleY(1.2) translateX(-50%);
stroke-dasharray: 280;
}
&.-first {
transform-origin: top;
.supt-section-text-big-homepage__line__glow {
overflow: hidden; /* Fixes the bug between the line before */
}
}
&.-last {
transform-origin: bottom;
}
}
/* Hide the glow of the bottom line overflowing behind the next section */
& + * {
position: relative;
z-index: 1;
}
}