Temporarily ignore a piece of script when button clicked

[andystent]

var ctrl = new ScrollMagic.Controller();
    var navFadeClick = document.querySelector("#nav-wrap")


////////// PART A //////////

            // This each sets the animation
            $('.anchor').each(function(index,element) {
            

              ////////// scroll up //////////

              new ScrollMagic.Scene({
                  triggerHook: 0,
                  triggerElement: this,
                  offset:-300 // Offset added to prevent overscrolling accidentally triggering - "Scroll Up" is more offset because of Windows browsers and iPad progressively shifting anchor landing point slightly back with each slide. This causes the scroll up and down triggers to move further down the screen and eventually trigger automatically.
              })
              .on('leave', function (testUp) {
                    TweenLite.to(window, 3, {
                      scrollTo: {
                        y: $(window).height() * (index - 1),
                        autoKill: false
                      },
                      ease: Linear.easeNone,
                      onComplete: function onComplete() {
                        return elementIsClicked = false;
                      }
                    });
              })

              .addIndicators({name: "scroll Up", colorStart: "yellow"})
              .addTo(ctrl);  // scene end
              

              //////////scroll down //////////

               new ScrollMagic.Scene({
                    triggerElement: this,
                    triggerHook: 0,
                    offset:140 // small offset added to prevent overscrolling accidentally triggering
                })
                .on('enter', function (testDown) {
                     TweenLite.to(window, 3, {
                      scrollTo: {
                        y: $(window).height() * (index + 1),
                        autoKill: false
                      },
                      ease: Linear.easeNone,
                      onComplete: function onComplete() {
                        return elementIsClicked = false;
                      }
                    });   
                })

                .addIndicators({name: "scroll Down", colorStart: "yellow"})
                .addTo(ctrl); // scene end
                

  
            }); //slide each

          } //end if active






    ///////// PART B //////////
          
    //When clicking Nav link temporarily ignore the script from PART A


    var navLinks2 = document.querySelectorAll("#nav-wrap nav a")

    navLinks2.forEach(function (navLink2) {
      navLink2.addEventListener('click', function (e) {

        e.preventDefault();

         var url = $(this).find("a[href]").attr('href');

        const urlOut = new TimelineMax({onComplete: function(){window.location.href = url;}});
        
        urlOut
        .to(navFadeClick, 1, {autoAlpha: 0})

       

      });
    });

I wonder if you guys could help?  Sorry for not supplying a Pen but I'm not sure of the best way to set up a simple example of what I'm trying to achieve outside of my project.

 

PART A: controls a smooth scrolling effect when the user scrolls past various triggers. It all works great.

 

PART B: is a nav using # anchor points. 

 

The issue is that sometimes the smooth scroll script from PART A causes the anchor link to get stuck. When I comment out that script  for PART A, the anchor links in PART B work perfectly all the time.

 

I thought that maybe a solution is to have the script from PART A be ignored when a user clicks the links in PART B. It would then need to be un-ignored again once the PART B tween has run.

 

Anyone have any ideas on how to achieve this?

 

THANK YOU!

[ZachSaucier]

Hey Andy.

 

This is really a question of how to disable Scroll Magic's effect temporarily. It's not really related to GreenSock as Scroll Magic is not a GreenSock product and we don't really recommend using it. The only way I'm aware of for doing something like that would be to kill the SM scene and rebuild it.

 

If you used other methods of animating things on scroll it would be very easy to pause it  An example of scroll based animation without SM:

See the Pen dyoOgYj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also 

 

[andystent]

Thanks for the reply Zach. I'll definitely be looking at options outside of SM for my next project.

 

Your advice help me get what I needed, which was to disable the controller > follow the # anchor link > then re enable the controller again after 1500ms.

 

// Click the button
    var navFadeClick = document.querySelector("#nav-wrap")
    var navLinks2 = document.querySelectorAll("#nav-wrap nav li a")

    navLinks2.forEach(function (navLink2) {
      navLink2.addEventListener('click', function (e) {

       

// Remember the link href
        var href = this.href;

       

// Don't follow the link
        e.preventDefault();
        

        if (controller.enabled()) {
          controller.enabled(false);
        }
        

// follow the link
        setTimeout(function(){
          window.location = href,
          console.log("follow the link");
        }, 1000);
        
        
        // re enable the controller - enableController
        setTimeout(enableController,1500);
        

   });
    });





//Enable the controller function
    function enableController(){


      if (!controller.enabled()) {
        controller.enabled(true);
      }
      controller.update(true);

      console.log("enable controller")

    }

 

Hopefully this will help someone in a similar situation