Переход в стиле GTA

<!--Переход в стиле GTA
https://mt-webdesign.ru/gta-->
<style>
.gta-bg .tn-atom {
-webkit-mask-image: url("https://static.tildacdn.com/tild6632-6464-4162-a166-663538363635/Vector.svg");
mask-image: url("https://static.tildacdn.com/tild6632-6464-4162-a166-663538363635/Vector.svg");
mask-repeat: no-repeat;
mask-size: 15000px;
mask-position: 39% 30%;
}
.gta-bg .tn-atom:before {
content: '';
display: block;
background: #fff;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: var(--psevdo-opacity, 0);
}
</style>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
function setupAnimations() {
const elementTrigger = '.gta_trigger';
if (window.matchMedia('(min-width: 100px) and (max-width: 7000px)').matches) {
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo(
'.gta-bg .tn-atom',
{
"--psevdo-opacity": 0,
webkitMaskSize: '15000px 11791',
maskSize: '15000px 11791',
maskPosition: '39% 30%',
},
{
"--psevdo-opacity": 1,
webkitMaskSize: '121px 95px',
maskSize: '121px 95px',
maskPosition: '50% 17%',
ease: 'power4.out',
scrollTrigger: {
trigger: elementTrigger,
start: "top top",
end: "bottom top",
scrub: true,
markers: false,
},
}
);
}
}
setupAnimations();
</script>