Thanks for your quick reply. Actually I did same think using scroll magic. you suggested Intersection Observer, this is also fine very clean. But the question is while using the mouse wheel, the second section is scroll to the top.
I tried like this,
const skillCount = document.querySelectorAll(".skill-item").length;
let isAnimating = false;
let count = 0;
const duration = 1;
window.addEventListener("wheel", () =>
{
heighth = $(".skill-item").height();
const delta = Math.sign(event.deltaY);
if(!isAnimating)
{
if(delta > 0 && count < skillCount - 1) {
gsap.to(".skill-item", {duration: duration, y: "-=" + heighth, onComplete: () => isAnimating = false })
}
else if(delta < 0 && count > 0)
{
gsap.to(".skill-item", {duration: duration, y: "+=" + heighth, onComplete: () => isAnimating = false });
}
isAnimating = true;
}
});