React router - on navigate back 1 page and scroll up animations dont work

[Krucial92]

First of all thanks for the library, very helpful! To my issue - I have just found a bug.

On my page I have 9 projects that appear as I scroll down, works perfect. Except for if I am at the bottom of the page, when I navigate to another page and then click the browser back button, the animation for any projects in my viewport (bottom of the page) will appear, but as I scroll back up my other projects, they do not appear. It appears that the viewport checker is not picking up that there are projects in view when scrolling up after having navigated back to that page.

Just to note that if I am at the bottom of a page and reload, then scroll up everything works perfectly as it should. It is only if I am at the bottom of a page, then navigation to another and click back to get to my projects page, and then scroll up that new projects in my viewport remain hidden.

Would you know why this might be? Thanks!

[dbramwell]

Hey. Do you use the animateOnce property?

I'm guessing they when you press the back button it goes to a URL that contains a hash? Means that when the browser navigates to that URL it goes to the page and then "scrolls" down to the hash? Meaning when you then scroll up all the animations have already been triggered.

This is all guess work though, I currently live in a van in new Zealand so won't have much chance to test. If my above guesses and assumptions are correct then maybe we could add a listener to the scroll animation element to set "animated" or "alreadyAnimated" or whatever it is to false on hash/URL change? Maybe in a timeout or something?

If you would like to investigate and try to fix it yourself then I'd be very grateful and more than happy to merge a pull request

[Krucial92]

Hey, thanks for your swift reply.

Yes I do use the animateOnce property, I removed it as a test and yes the issue goes away, but I would prefer to set animateOnce to true in my case as I don't want projects appearing, animating again when scrolling back up on the page.

The page does not go to a URL containing a hash, using React Router my page is /projects. When I click the back button I am back at the bottom of the page where I clicked to go to another url.

When I click the back button anything in the visible viewport animates again which is good, but as I scroll back up it seems that my fadeInUp class is not applied to other animated divs that come into the viewport.

Also to note that this only happens after having pressed the back button when scrolling up, it is fine if I press the back button and then scroll down (animations coming into the viewport appear).

I will investigate this myself and submit a pull if I come up with a solution.

Thanks for your help, and cool your from NZ, I am originally from Wellington - lived there for 18 years :)

Cheers!

[dbramwell]

Hey,

Sorry for the delay. I'm actually from the UK, just here for a year (6 weeks left), driving around in one of those old vans with a bed in the back that you might have been sick of seeing!

I had a play with react router a while back, but couldn't reproduce your issue. However there were a whole bunch of issues in the previous implementation that could have been to blame. The two that irritated me the most and likely caused most issues were:

1. Element boundaries were calculated only on initial render, if the size of the element changed after that (such as can be caused by an image loading), then the boundaries to trigger the animation would be incorrect.
2. If an element was only slightly smaller than the viewport, then it would have to be scrolled exactly into the viewport before the animation triggered.

Did your animated elements contain any images? If they did then the "bottom" of the element might not have been where you expected it due to the image taking a while to load, and so scrolling up may not have triggered the animation at the expected time.

If you could test again with the new version and give me some feedback I'd be appreciative.