Change MagicScroll to IntersectionObserver in GSAP

[Cedec]

Hi

 

I want to upgrade of TweenMax to GSAP and I want remove MagicScroll, because it doesn't work the way I would like. I am trying to implement IntersectionObserver but I can't start the event too much.

My false test implement:

 

let introIconSects = document.querySelectorAll('.wrapper')

if ("IntersectionObserver" in window) {
    const appearOptions = {
        threshold: 1
    };
    
    const observerTwo = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          
          var el = entry.target;
            
            if (!entry.isIntersecting && el.classList.contains('cover')) {
                el.tween.pause(0);
            } else if (entry.isIntersecting && el.classList.contains('cover')) {
                el.tween.play();
                observerTwo.unobserve(el);
            }
        })
    }, appearOptions)
    
    introIconSects.forEach((el) => {
        var tl = gsap.timeline();
        var cov = el.querySelectorAll(".cover");
        var img = el.querySelectorAll(".img");
        var txt = el.querySelectorAll(".txt");
      
      
        tl.from(cov, 0.6, {
          scaleX: 0,
          transformOrigin: "left"
        });
        tl.to(cov, 0.6, {
          scaleX: 0,
          transformOrigin: "right"
        }, "reveal");
        tl.from(img, 0.6, {
          opacity: 0
        }, "reveal");
        tl.staggerFrom(txt, 2, {
          opacity: 0,
          ease: "power4.inOut"
        }, 0.055, 0.5);
      
      observerTwo.observe(el);
    });
    
} else {
    /*** Fallback for older browsers ****/
    
}

 

Can anyone tell you how to deal with it?

My working example in MagicScroll

See the Pen oNXMGQG by Cedec333 (@Cedec333) on CodePen

[ZachSaucier]

Hey Cedec and welcome to the GreenSock forums! 

 

I highly recommend that you check out this article by Ryan (@elegantseagulls) , one of our moderators here. It shows you step by step how to make animations fire on scroll using the intersection observer API: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa