waypoints (multiple); refreshAll not working

Question

I'm using several waypoints on http://www.piroc.com/delete/waypointsTest.html, mostly to animate elements while scrolling. but once an animated object changes height, the following waypoints are out of position. I read all about the refreshAll() function and used it where I think appropriate but that's obviously not right. Also, whenever I resize the window, the animation of the four circles on the page doesn't work at the right position.

here's my code

var homeCircles = jQuery('#home-circles');
var whatWeDo = jQuery('#what-we-do');
var ourWork = jQuery('#our-work');
var caseStudies = jQuery('.case-studies');
var homeLogo = jQuery('#home-logo');
var headerLogo = jQuery('#header-logo');

//scrolling animations by way of 'waypoint' jquery plugin.

var homeLogoPos = homeLogo;
var homeLogoOffset = homeLogoPos.offset();

var waypointHeaderLogo = new Waypoint({
    element: headerLogo,
    offset: function() {
            return -(homeLogo.height() + homeLogoOffset.top - 190)
        },
    handler: function(direction) {
        if (direction === 'down') {
            jQuery(this.element).addClass('scrolled');
        } else {
            jQuery(this.element).removeClass('scrolled');
        }
        Waypoint.refreshAll;
        //tried the following as well, no luck
        Waypoint.disableAll();
        Waypoint.enableAll();
    }
})

var waypointWhatWeDo = new Waypoint({
    element: whatWeDo,
    offset: '99%',
    handler: function(direction) {
        if (direction === 'down') {
            whatWeDo.addClass('scrolled');
        } else {
            whatWeDo.removeClass('scrolled');
        }
        Waypoint.refreshAll(); //causes an error 
    }
})

var waypointHomeCircles = new Waypoint({
    element: homeCircles,
    offset: '99%',
    handler: function(direction) { 
        if (direction === 'down') {
            homeCircles.addClass('scrolled');
        } else {
            homeCircles.removeClass('scrolled');
        }
        Waypoint.refreshAll;
    }
})

var waypointHomeCircles2 = new Waypoint({ 
    element: homeCircles,
    offset: '99%',
    handler: function(direction) {
        if (direction === 'down') {
            ourWork.addClass('scrolled');
        } else {
            ourWork.removeClass('scrolled');
        }
        Waypoint.refreshAll;
    }
})

var waypointsCaseStudies = new Waypoint({
    element: caseStudies,
    offset: '99%',
    handler: function(direction) { 
        if (direction === 'down') {
            caseStudies.addClass('scrolled');
        } else {
            caseStudies.removeClass('scrolled');
        }
    }
})

note: when I use Waypoint.refreshAll() (with function parentheses) I get a stack error.

any pointers on how to use refreshAll() properly would be appreciated.

Answer 1

Finally found a way to a solution on jQuery Waypoints Refresh with CSS Transition the problem was that my .scrolled class contained CSS transitions which needed to be completed before waypoints were to be refreshedAll() also, it seems that you shouldn't call refreshAll() within the handler. it's obvious in hindsight but the docs don't mention it specifically. hope it helps someone