Переход с первого экрана

<!--Переход с первого экрана
https://mt-webdesign.ru/akony-->
<script>
$('.uc-akony-top, .uc-akony-bottom').appendTo('.akony .tn-atom');
document.querySelector('.uc-akony-top').style.overflow = 'hidden';
document.querySelector('.uc-akony-bottom').style.overflow = 'hidden';
</script>
<style>
.uc-akony-hide {
overflow: hidden;
z-index: 20;
position: relative;
}
.akony .tn-atom {
min-height: 100vh;
height: 100%;
justify-content: flex-start;
overflow: hidden;
padding: 0;
top: 0;
width: 100%;
will-change: transform;
}
.uc-akony-top, .uc-bottom {
display: flex;
flex: none;
flex-direction: column;
flex-wrap: nowrap;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.uc-akony-top {
height: 50%;
}
.uc-akony-bottom {
justify-content: flex-end;
height: 50%;
}
.uc-akony-top .t396__artboard, .uc-akony-bottom .t396__artboard {
position: absolute;
left: 0;
top: 0;
}
.uc-akony-bottom .t396__artboard {
transform: translateY(-50%);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
function setupAnimations() {
const triggers = [
{ elementSelector: '.uc-akony-bottom', yValue: '100%' },
{ elementSelector: '.uc-akony-top', yValue: '-100%' }
];
const triggerSelector = '.akony';
if (document.querySelector(triggerSelector)) {
if (window.matchMedia('(min-width: 0px) and (max-width: 5000px)').matches) {
triggers.forEach(({ elementSelector, yValue }) => {
if (document.querySelector(elementSelector)) {
gsap.fromTo(elementSelector,
{ y: 0, ease: 'linear' },
{
y: yValue,
scrollTrigger: {
trigger: triggerSelector,
start: "top top",
end: "top+=1000px",
scrub: true,
markers: false
}
}
);
}
});
}
}
}
setupAnimations();
});
</script>