[Scroll magic Pin not working while using GSAP]

See the Pen xxbVKpa by KarthickVeeramani (@KarthickVeeramani) on CodePen

[Scroll magic Pin not working while using GSAP]

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

[Scroll magic Pin not working while using GSAP]

If I'm suppose to apply Gsap animation for Pinned wrapper element means the Scroll magic pin not working. 

 

[Scroll magic Pin not working while using GSAP]

I need to do like this using GSAP. 

See the Pen xxbVKpa by KarthickVeeramani (@KarthickVeeramani) on CodePen

 

 

 

 

 

[Scroll magic Pin not working while using GSAP]

7 minutes ago, KarthickVeera said:

Using Gsap animation pinning not working..

 

With out using GSAP scroll magic pin is working perfectly. Check below link,

 

 

 

 

Without GSAP

See the Pen xxbVKpa by KarthickVeeramani (@KarthickVeeramani) on CodePen

[Scroll magic Pin not working while using GSAP]

Using Gsap animation pinning not working..

 

With out using GSAP scroll magic pin is working perfectly. Check below link,

 

See the Pen xxbVKpa by KarthickVeeramani (@KarthickVeeramani) on CodePen

See the Pen gObrYBa by KarthickVeeramani (@KarthickVeeramani) on CodePen

[Multi Scroll]

I tried many ways using scroll magic. 

I need to do while scrolling left is going to be a bottom right is going to be up. with scroll to position and smooth scroll.

 

Now I created html. Kindly help me.

See the Pen jOEPvRm by KarthickVeeramani (@KarthickVeeramani) on CodePen

[Multi Scroll]

I need do like multi scroll using Gsap.  

 

 

I have to do like this https://dpotferstudio.com/ 

See the Pen raQYVw by romswellparian (@romswellparian) on CodePen

[Css Plugin in Gsap3]

Superb, Thanks 

[Css Plugin in Gsap3]

12 hours ago, ZachSaucier said:

Hey Karthick and welcome to the GreenSock forums. Thanks for being a Club GreenSock member! 

 

I switched out the TweenMax file for the GSAP 3 file and it worked without issue.

 

 

 

 

Am I missing something?

Thanks for your quick reply.

 

I need like this,  using GSAP 3

See the Pen 38204e7a0163c5f7c32749a380f5acb0 by GreenSock (@GreenSock) on CodePen

 

 

[Css Plugin in Gsap3]

Hi Guys..

 

I have tried book flip using Gsap3 plugin. While using a tweenMax.js, cssPlugin-Perspective is working perfectly. but I have to do using gsap.min.js. 

It will not work properly. 

 

Thanks in advance  

See the Pen RwNNoEL by KarthickVeeramani (@KarthickVeeramani) on CodePen