onEnter always fires on page load even when the component isn't on the viewport

Had to add this extra logic in order to make it work properly (just when the component is on the viewport), this.revealTo(50, true) is just a custom method that needs to be called when the component is on the viewport.

onEnterViewport = () => {
  if (this.state.onViewport === true) this.revealTo(50, true);
  this.setState({onViewport: true});
}

And this is at the end of the render:

<Waypoint onEnter={() => this.onEnterViewport()} />

[lauterry]

hi @trotzig

Thanks for the input.

I have a page where contents display conditionally causing the page height to be dynamically sized on load.

I think i have to put the Waypoint inside the if instead of outside :

<Waypoint onEnter={() => console.log('entered!');} />

if (doDisplay) {
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
}

if (doDisplay) {
 <Waypoint onEnter={() => console.log('entered!');} />
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
 <img src='http://placehold.it/500x500' style={{ height: 500 }}>
}

I’ll let you know

[trotzig]

Are the pages you are referring to publicly accessible? In general, the most common reason that waypoints are triggered prematurely on load is because of dynamic content on the page asynchronously making the page taller. Images for instance, can cause this.

<img src='http://placehold.it/500x500'>
<img src='http://placehold.it/500x500'>
<img src='http://placehold.it/500x500'>
<Waypoint onEnter={() => console.log('entered!');} />

Despite the images taking up 1500px, on initial load they don’t take up any space at all. We can fix this with some css:

<img src='http://placehold.it/500x500' style={{ height: 500 }}>
<img src='http://placehold.it/500x500' style={{ height: 500 }}>
<img src='http://placehold.it/500x500' style={{ height: 500 }}>
<Waypoint onEnter={() => console.log('entered!');} />

This waypoint won’t be triggered until you actually scroll down.

Could this be the case? It doesn’t have to be images at all, there are other types of dynamically sized content that can cause this behavior.

If you add the debug prop, there’s a chance you might see something interesting. You can paste the output from it here and I’ll help you too.