jQuery Waypoints not firing at correct location

Question

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.

I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.

// first-flexslider
$(window).load(function() {
  $('#firstSlider').flexslider({
    animation: "slide",
    directionNav: false,
    controlNav: true,
  });
});
// second-flexslider
$(window).load(function() {
  $('#secondSlider').flexslider({
    animation: "slide",
    directionNav: false,
    controlNav: false,
  });
});
$('.prev, .next').on('click', function() {
  var href = $(this).attr('href');
  $('#secondSlider').flexslider(href)
  return false;
})
$(document).ready(function(){
  $.waypoints('refresh');
});
// waypoints
$(document).ready(function() {

  $('.wp1').waypoint(function() {
    $('.wp1').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });

  $('.wp2').waypoint(function() {
    $('.wp2').addClass('animated fadeInUp');
  }, {
    offset: '75%'
  });

  $('.wp3').waypoint(function() {
    $('.wp3').addClass('animated fadeInUpD');
  }, {
    offset: '75%'
  });

});

I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.

Answer 1

Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

I would check out the after callback and possibly the start callback and call refresh from there. For example:

$('#secondSlider').flexslider({
  animation: "slide",
  directionNav: false,
  controlNav: false,
  after: function() {
    $.waypoints('refresh');
  }
});