Use scroll snap after scrollsequence ends

Hi,

I’m trying to add a scroll snap “animation” to the section that comes after the scrollsequence.

After the scrollsequence the scrolling speed looks like it’s too fast because of the sudden change of a sticky section to a normal one. As a solution for this I’m trying to add a scroll snap to the section that comes right after scrollsequence. I tried both, code (HTML, CSS and javascript) and elementor pro’s scroll snap option but nothing is working.

What I have is:

-Section 1 – Scrollsequence
-Section 2 – A text widget that goes above section 1 when scrolling. This section scrolls up and sticks to the top until section 1 ends.
-Section 3 – a video widget that I want to have the scroll snap effect or something similar that slows down or stops the section from scrolling so the viewer can adapt its vision from the scrollsequence flow to a normal one.

Until now, what I’ve gather is when I add scroll snap to section 3, section 2 doesn’t unstick when section 1 ends and stays fixed the whole page. The scroll snap effect doesn’t works either.

This is the code I have for section 2 that is probably in comflit with scroll snap:

<style>

.fixed-div { position: sticky; top: 0; z-index: 999; } (section 2)

.unfixed { position: absolute !important; }

.video-intro { height: 100vh; } (section3)

</style>

<script>

var scrollEnabled = true; 

window.addEventListener('scroll', function() { 
var fixedDiv = document.querySelector('.fixed-div');
var videoIntro = document.querySelector('.video-intro');
var scrollY = window.scrollY || window.pageYOffset; 

if (fixedDiv && videoIntro) { 
var videoIntroPosition = videoIntro.getBoundingClientRect().top; 
var unstickThreshold = 500; // Adjust this value as needed 

if (videoIntroPosition <= unstickThreshold) { 
fixedDiv.classList.add('unfixed');
fixedDiv.style.top = (videoIntroPosition - unstickThreshold +
scrollY) + 'px';
} else { 
fixedDiv.classList.remove('unfixed'); 
fixedDiv.style.top = '0';
 } 
// Check if scrolling is temporarily disabled 
if (!scrollEnabled) {
 window.scrollTo(0, scrollY); 
} 
} 
}); 

// Disable scrolling for a few seconds 
function disableScrolling(duration) {
scrollEnabled = false;
setTimeout(function() {
scrollEnabled = true;
}, duration);
}

// Call the disableScrolling function with the desired duration (in milliseconds)
disableScrolling(2000); // 2000 milliseconds = 2 seconds

</script>