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.

Have you tried growing the previous headers after you passed their sections? Seems like the DOM difference is caused by keeping the headers shrunken after you pass them, right? — Josh KG
– Josh KG, Commented Oct 16, 2013 at 0:45
Or maybe offset each successive header by more than the previous to account for the DOM changes? — Josh KG
– Josh KG, Commented Oct 16, 2013 at 0:47

imakewebthings · Accepted Answer · 2013-10-16 04:05:37Z

2

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.

answered Oct 16, 2013 at 4:05

imakewebthings

3,3981 gold badge25 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ckayfoote Over a year ago

Gave it a try. This seems closer, but I think that maybe the transition is a longer duration than the actual time it takes for the waypoint to reach its target which may be throwing things off a tiny bit. I tried adjusting the transition duration, but that didn't seem to help. Thanks for point out the js event... you got me on the right path :)

ckayfoote Over a year ago

I actually got it to work using some CSS to trick the DOM. A little negative margin action ;)

Collectives™ on Stack Overflow

jQuery Waypoints Refresh with CSS Transition

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related