Jump to content
Search Community

Scroll magic Pin not working while using GSAP

KarthickVeera test
Moderator Tag

Recommended Posts

Hey Karthick,

 

Weren't you doing the same thing without ScrollMagic? Why add ScrollMagic now?

ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members.

Maybe this post by our very own Craig can help you:

 It's not clear from the demo what you're trying to accomplish. Please add more detail about the expected behavior and remove any superfluous code.

Link to comment
Share on other sites

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;
    }
});
 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...