rnosov / react-reveal

Easily add reveal on scroll animations to your React app
https://www.react-reveal.com/
MIT License
2.72k stars 180 forks source link

React reveal starts revealing, before content (image) is loaded. #35

Open 422158 opened 5 years ago

422158 commented 5 years ago

Hello community

On my page I am using cascade reveal on my list. Each list item has a React component rendered inside (the component is basically link thumbnail). My problem is that reveal of the list item begins before the component inside is fully loaded, meaning items are revealed before thumbnail image is fully loaded. This is problem speacially with poor internet connection. Question is: Is there any way to postpone reveal up until the image and the item content is fully loaded?

By the way great work, really like the framework.

AhriWindway commented 5 years ago

Hi! For image you can use component that provides onLoad callback(f.e. react-image) and use spy property on your reveal, so reveal will start when spy become true.

Something like this:

<Bounce spy={this.state.loaded}>
  <Img src="your icon" onLoad={() => this.setState({loaded: true})} />
</Bounce>