title: TypeError: btn.offset(...) is undefined on Morphing Modal Window
body: <p>I have found a nice morphing modal script that I am trying to add into WordPress however I keep getting the following error:</p>
  
  <pre><code>TypeError: btn.offset(...) is undefined
  </code></pre>
  
  <p>I am not great with Javascript so am not sure what exactly I need to do to fix this? I am using the exact code from the tutorial I found.</p>
  
  <p>The url is: <a href="http://goo.gl/P4TAuw" rel="nofollow">http://goo.gl/P4TAuw</a> (Scroll down to find the modal section)</p>
  
  <p>the code:</p>
  
  <pre><code>jQuery(document).ready(function($){
  //trigger the animation - open modal window
  $('[data-type="modal-trigger"]').on('click', function(){
      var actionBtn = $(this),
          scaleValue = retrieveScale(actionBtn.next('.cd-modal-bg'));
  
      actionBtn.addClass('to-circle');
      actionBtn.next('.cd-modal-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
          animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
      });
  
      //if browser doesn't support transitions...
      if(actionBtn.parents('.no-csstransitions').length &gt; 0 ) animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);
  });
  
  //trigger the animation - close modal window
  $('.cd-section .cd-modal-close').on('click', function(){
      var section = $(this).parents('.cd-section');
      section.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
          animateLayer(section.find('.cd-modal-bg'), 1, false);
      });
  
      //if browser doesn't support transitions...
      if(section.parents('.no-csstransitions').length &gt; 0 ) animateLayer(section.find('.cd-modal-bg'), 1, false);
  });
  
  $(window).on('resize', function(){
      //on window resize - update cover layer dimention and position
      if($('.cd-section.modal-is-visible').length &gt; 0) window.requestAnimationFrame(updateLayer);
  });
  
  function retrieveScale(btn) {
      var btnRadius = btn.width()/2,
          left = btn.offset().left + btnRadius,
          top = btn.offset().top + btnRadius - $(window).scrollTop(),
          scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());
  
      btn.css('position', 'fixed').velocity({
          top: top - btnRadius,
          left: left - btnRadius,
          translateX: 0,
      }, 0);
  
      return scale;
  }
  
  function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
      var maxDistHor = ( leftValue &gt; windowW/2) ? leftValue : (windowW - leftValue),
          maxDistVert = ( topValue &gt; windowH/2) ? topValue : (windowH - topValue);
      return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
  }
  
  function animateLayer(layer, scaleVal, bool) {
      layer.velocity({ scale: scaleVal }, 400, function(){
          $('body').toggleClass('overflow-hidden', bool);
          (bool) 
              ? layer.parents('.cd-section').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
              : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modal-trigger"]').removeClass('to-circle');
      });
  }
  
  function updateLayer() {
      var layer = $('.cd-section.modal-is-visible').find('.cd-modal-bg'),
          layerRadius = layer.width()/2,
          layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
          layerLeft = layer.siblings('.btn').offset().left + layerRadius,
          scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());
  
      layer.velocity({
          top: layerTop - layerRadius,
          left: layerLeft - layerRadius,
          scale: scale,
      }, 0);
  }
  });
  </code></pre>