Jump to content
Search Community

Change MagicScroll to IntersectionObserver in GSAP

Cedec test
Moderator Tag

Recommended Posts



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')) {
            } else if (entry.isIntersecting && el.classList.contains('cover')) {
    }, 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);
} 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

  • Like 1
Link to comment
Share on other sites

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

  • Like 6
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...