Трансформация с пошаговой анимацией

<!--Трансформация с пошаговой анимацией
https://mt-webdesign.ru/step-by-transform-->
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
function setupAnimations() {
const firstTrigger = '.trigger-transform';
const elementSelector = '.text-main .tn-atom';
const elementInsideSelector = document.querySelector(elementSelector);
if (elementInsideSelector) {
if (window.matchMedia('(min-width: 1200px) and (max-width: 5000px)').matches) {
gsap.fromTo(
elementSelector,
{
y: 0,
ease: 'linear'
},
{
y: '-400px',
scrollTrigger: {
trigger: firstTrigger,
start: "top top",
end: "bottom top",
scrub: true,
markers: false
}
}
);
}
if (window.matchMedia('(min-width: 960px) and (max-width: 1199px)').matches) {
gsap.fromTo(
elementSelector,
{
y: 0,
ease: 'linear'
},
{
y: '-400px',
scrollTrigger: {
trigger: firstTrigger,
start: "top top",
end: "bottom top",
scrub: true,
markers: false
}
}
);
}
}
}
setupAnimations();
});
</script>
<style>
html {
overflow-x: hidden;
}
.uc-main-trans, .uc-text-marquee {
display: none;
}
.uc-overlap {
z-index: 99 !important;
position: relative;
}
.display-visible {
display: block !important;
overflow: hidden !important;
}
.uc-block-bg {
position: absolute;
z-index: 97;
}
.main-trans {
position: relative !important;
z-index: 99 !important;
}
.text-marquee {
position: relative !important
z-index: 89 !important;
}
</style>
<script>
setTimeout(function() {
$('.uc-main-trans').appendTo('.main-trans .tn-atom').addClass('display-visible');
$('.uc-text-marquee').appendTo('.text-marquee .tn-atom').addClass('display-visible');
}, 500);
setInterval(function() {
$('.main-trans .tn-atom__sbs-anim-wrapper').css('top', '0');
$('.text-marquee .tn-atom__sbs-anim-wrapper').css('top', '0');
}, 100);
</script>