title: Fullscreen Overlay Effects Tympanus Multiple Buttons
body: <p>Hi i want to modify the code from this tutorial on tympanus <a href="http://tympanus.net/Development/FullscreenOverlayStyles/index12.html" rel="nofollow">http://tympanus.net/Development/FullscreenOverlayStyles/index12.html</a> If possible i would like to make multiple buttons to open the overlay. The original code looks like this </p>
  
  <pre><code>    (function() {
      var triggerBttn = document.getElementById( 'trigger-overlay' ),
          overlay = document.querySelector( 'div.overlay' ),
          closeBttn = overlay.querySelector( 'button.overlay-close' );
          transEndEventNames = {
              'WebkitTransition': 'webkitTransitionEnd',
              'MozTransition': 'transitionend',
              'OTransition': 'oTransitionEnd',
              'msTransition': 'MSTransitionEnd',
              'transition': 'transitionend'
          },
          transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
          support = { transitions : Modernizr.csstransitions };
          s = Snap( overlay.querySelector( 'svg' ) ), 
          path = s.select( 'path' ),
          steps = overlay.getAttribute( 'data-steps' ).split(';'),
          stepsTotal = steps.length;
  
      function toggleOverlay() {
          if( classie.has( overlay, 'open' ) ) {
              var pos = stepsTotal-1;
              classie.remove( overlay, 'open' );
              classie.add( overlay, 'close' );
  
              var onEndTransitionFn = function( ev ) {
                      classie.remove( overlay, 'close' );
                  },
                  nextStep = function( pos ) {
                      pos--;
                      if( pos &lt; 0 ) return;
                      path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
                          if( pos === 0 ) {
                              onEndTransitionFn();
                          }
                          nextStep(pos);
                      } );
                  };
  
              nextStep(pos);
          }
          else if( !classie.has( overlay, 'close' ) ) {
              var pos = 0;
              classie.add( overlay, 'open' );
  
              var nextStep = function( pos ) {
                  pos++;
                  if( pos &gt; stepsTotal - 1 ) return;
                  path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
              };
  
              nextStep(pos);
          }
      }
  
      triggerBttn.addEventListener( 'click', toggleOverlay );
      closeBttn.addEventListener( 'click', toggleOverlay );
  })();
  </code></pre>
  
  <p>And I'm trying to ues each function so i added: </p>
  
  <pre><code>var triggerBttn;
  $(".trigger-overlay").each(function () {
  
      triggerBttn = $(this).attr('id');
  
      (function() {
      var 
          overlay = document.querySelector( 'div.overlay' ),
          closeBttn = overlay.querySelector( 'button.overlay-close' );
          transEndEventNames = {
              'WebkitTransition': 'webkitTransitionEnd',
              'MozTransition': 'transitionend',
              'OTransition': 'oTransitionEnd',
              'msTransition': 'MSTransitionEnd',
              'transition': 'transitionend'
          },
          transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
          support = { transitions : Modernizr.csstransitions };
          s = Snap( overlay.querySelector( 'svg' ) ), 
          path = s.select( 'path' ),
          steps = overlay.getAttribute( 'data-steps' ).split(';'),
          stepsTotal = steps.length;
  
      function toggleOverlay() {
          if( classie.has( overlay, 'open' ) ) {
              var pos = stepsTotal-1;
              classie.remove( overlay, 'open' );
              classie.add( overlay, 'close' );
  
              var onEndTransitionFn = function( ev ) {
                      classie.remove( overlay, 'close' );
                  },
                  nextStep = function( pos ) {
                      pos--;
                      if( pos &lt; 0 ) return;
                      path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { 
                          if( pos === 0 ) {
                              onEndTransitionFn();
                          }
                          nextStep(pos);
                      } );
                  };
  
              nextStep(pos);
          }
          else if( !classie.has( overlay, 'close' ) ) {
              var pos = 0;
              classie.add( overlay, 'open' );
  
              var nextStep = function( pos ) {
                  pos++;
                  if( pos &gt; stepsTotal - 1 ) return;
                  path.animate( { 'path' : steps[pos] }, 60, mina.linear, function() { nextStep(pos); } );
              };
  
              nextStep(pos);
          }
      }
  
      triggerBttn.addEventListener( 'click', toggleOverlay );
      closeBttn.addEventListener( 'click', toggleOverlay );
  })();
  });
  </code></pre>
  
  <p>But for some reason it says </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'addEventListener' of undefined </p>
  </blockquote>