GSAP: Сделайте Hero Banner Stick, пока анимация не будет завершена ⇐ Javascript

[Anonymous]

Я пытаюсь достичь этого типа анимации на этом веб-сайте
https://the-dhonies.webflow.io


gsap.registerPlugin(ScrollTrigger);

let timeline = gsap.timeline({
scrollTrigger: {
trigger: '#hero-container',
start: 'top top',
end: '+=600px',
scrub: true, // Smooth scrolling effect
},
});

// Step 1: Logo zooms first
timeline.to('#scrolllogo', {
scale: 1.15,
opacity: 1,
duration: 1,
});

// Step 2: Overlay starts zooming & fades the logo
timeline.to(
'#scrolloverlay',
{
scale: 1.3,
duration: 1,
},
'-=0.5',
); // Overlapping animation for smooth transition

timeline.to(
'#scrolllogo',
{
opacity: 0,
duration: 0.5,
},
'-=0.5',
);

// Step 3: Background zooms last
timeline.to('#scrollbackground', {
scale: 1.6,
duration: 1,
});

// Step 4: Fade out overlay & background after animation
timeline.to(
['#scrolloverlay', '#scrollbackground'],
{
opacity: 0,
duration: 1,
},
'-=0.5',
);< /code>
#hero-container {
height: 90vh;
overflow: hidden;
background: linear-gradient(0deg, #0f5812, #f50505);
}

#content {
position: relative;
z-index: 10;
background-color: white;
}

#hero-section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.hero-image,
.hero-overlay {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.hero-overlay {
mix-blend-mode: multiply;
}

.hero-logo {
position: absolute;
z-index: 2;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.hero-logo img {
display: block;
width: 100%;
height: auto;
width: 150px;
}
.justclass{
min-height: 1000px;
}< /code>





class='hero-image hero-overlay'
id='scrolloverlay'
style="background-image: url('"
>


alt='Logo'
>




cxcx
< /code>
< /div>
< /div>
< /p>
Я смог сделать анимацию, но я хочу иметь возможность Чтобы сделать страницу статичной до тех пор, пока анимация героя не будет завершена, продолжить обычную свиток. Я пытался заставить это работать, но в конечном итоге я полностью замораживал страницу.


Подробнее здесь: https://stackoverflow.com/questions/794 ... s-complete