var ctrl = new ScrollMagic.Controller({   
    });
  
 
    // This each sets the animation
    $('.slide').each(function(index,element) {  
      
      
      
          ////////// scroll up //////////

          new ScrollMagic.Scene({
              triggerHook: 0,
              triggerElement: this,
              offset:-50 // small offset added to prevent overscrolling accidentally triggering
          })
          .on('leave', function () {
                TweenLite.to(window, .5, {scrollTo:{y:$(window).height() * (index-1), autoKill:false},ease: Linear.easeNone})
          })
          .addTo(ctrl);  // scene end




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

           new ScrollMagic.Scene({
                triggerElement: this,
                triggerHook: 0,
                offset:50 // small offset added to prevent overscrolling accidentally triggering
            })
            .on('enter', function () {
                 TweenLite.to(window, .5, {scrollTo:{y:$(window).height() * (index+1), autoKill:false},ease: Linear.easeNone});   
            })
            .addTo(ctrl); // scene end
       
      
      
      
            ////////// Main Nav Click transition //////////
            
            //slide 1 link
            var slide1Nav = document.getElementById("#slide1nav")
            
            slide1Nav.addEventListener('click', event => {

                var slide1NavMove = new TimelineMax()

                      slide1NavMove
                        TweenLite.to(window, 1, {scrollTo:"#slide1"});

              });
      
              //slide 2 link
              var slide2Nav = document.getElementById("#slide2nav")

              slide2Nav.addEventListener('click', event => {

                  var slide2NavMove = new TimelineMax()

                        slide2NavMove
                          TweenLite.to(window, 1, {scrollTo:"#slide2"});

                });
      
      
              //slide 3 link
              var slide3Nav = document.getElementById("#slide3nav")

              slide3Nav.addEventListener('click', event => {

                  var slide3NavMove = new TimelineMax()

                        slide3NavMove
                          TweenLite.to(window, 1, {scrollTo:"#slide3"});

                });
      
      
                //slide 4 link
                var slide4Nav = document.getElementById("#slide4nav")

                slide4Nav.addEventListener('click', event => {

                    var slide4NavMove = new TimelineMax()

                          slide4NavMove
                            TweenLite.to(window, 1, {scrollTo:"#slide4"});

                  });
      
      
    }); //slide each
  
  




/// If clicked
var elementIsClicked = false;
function clickHandler(){
  elementIsClicked = true;
}

var element = document.getElementById('#slide2nav');
element.addEventListener('click', clickHandler);


function clickHandler(){
    if(element){
        console.log('Clicked'); ///works
    } else {
        console.log('Not'); ///Not working - this is where I'd want to put my scrollmagic stuff.
    }
}