jQuery Waypoints Refresh with CSS Transition

Question

I'm using waypoints to toggle a class which creates a CSS transition based on an offset. This is css transition decreases the height of an element. I've tried using the refresh function to recalculate the DOM once each waypoint is passed, but I'm not sure I'm doing it right or maybe I'm slightly restricted here.

You can view the site here: http://dev.rostylesalon.com/

jQuery('#aboutwrap').waypoint( function() {
    jQuery('#aboutwrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });

jQuery('#servicewrap').waypoint( function() {
    jQuery('#servicewrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });

jQuery('#contactwrap').waypoint( function() {
    jQuery('#contactwrap .section-header').toggleClass('header-animate');
$.waypoints('refresh');
}, { offset: 300 });

Each section header above should toggle a class that increases/decreases it's height. I thought the 'refresh' would recalculate the DOM to accomodate for this, but that's not the case. And the waypoint/anchor point ends up higher than intended. If you move from one section to the next, no issue. But if you skip over a section using the nav you'll the section header ends up slightly higher than the top of the viewport.

Answer 1

You are absolutely on the right path in calling refresh after the class toggle. You do want the recalculation of trigger points that it provides.

The issue here is that the CSS transition happens asynchronously. You toggle the class and your transition starts, meanwhile your JavaScript has already moved on to calling refresh but your transition has only begun. What you want is to wait until the transition is completed until you call refresh.

CSS Transitions, besides their CSS properties, also give us a JavaScript event called transitionend. Here is how you might use it (untested) on your page.

First, I'd like to refactor your existing code a bit to make it easier to reason about. All of your waypoints do the same thing and your sections have common markup we can use. So we can make this waypoint call only once and let Waypoints loop through the elements itself. And this within the waypoint callback refers to the HTML element itself, so we'll make use of that:

jQuery('.section-wrapper').waypoint( function() {
  jQuery(this).find('.section-header').toggleClass('header-animate');
}, { offset: 300 });

Ok, now let's add the transitionend handler:

jQuery('.section-wrapper').waypoint( function() {
  jQuery(this).find('.section-header').toggleClass('header-animate');
}, { offset: 300 });

jQuery('.section-header').on('webkitTransitionEnd transitionend', function() {
  jQuery.waypoints('refresh');
});

That should get the job done.