Animations do not load on rapid scroll-down in window

[EdwaRen]

So this is an issue I discovered on testing edge cases for one of my web projects. The ScrollAnimation in question is about 2k pixels down the window and out of the initial page load view. However when the page loads and the user immediately scrolls down at least 1k-2k pixels, the animation does not render. When the user scrolls back up and down again, the animation only seems to render partially.

The code below where this.state.offset = 100:

<ScrollAnimation offset = {this.state.offset} animateIn='pulse'     animateOnce={true}>
   <img className = "HeadlineSponsor" src = {Logo_MEF} ></img>
</ScrollAnimation>

I suspect the issue might lie within loading a large number of ScrollAnimations at the same time, the isvisible() function seems good and window.pageYOffset also works fine.

[dbramwell]

Hi,

Sorry for the delay. Did you get anywhere with figuring this out? I've released version 2.0.0 today which contains quite a lot of changes to how the triggers for the animations work. There were a few issues with the way the old version worked that might apply to your case:

1. Element boundaries were calcualted 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.

If you haven't solved it some other way would you be able to try with version 2.0.0 and get back to me.

Thanks.

[mitrakmt]

What other animateIn props are there besides "fadeIn"? When I use "initiallyVisible={true}" it animates when the app loads rather than when it scrolls into view, but when I use animateIn, it just looks like a fading in animation rather than any type of animation I'm trying to accomplish

[nicomfe]

@EdwaRen I found the same problem when setting up a custom offset. When removing that attribute issue is gone.

[EdwaRen]

@nicomfe Perfect, thanks for the followup! Glad that you've noticed the cause of the issue and found an easy fix :)

[Kailouu]

I'm still seeing this Issue, I have a list on a page of 100 or so items. When i use the mouse wheel click to scroll fast, it skips past and doesn't play the animation. Then when i scroll back up it fills in the gaps. Any ideas on a work around for this?

[slutske22]

I am having the same issue here. With many elements wrapped in a ScrollAnimation, scrolling down quickly makes it so that the animation doesn't trigger and the elements never become visible, even if scrolling up and down multiple times. I only noticed this problem when using the delay prop. I don't want to have to ditch the delay prop, as it adds a nice cascading effect.

Edit: I may have found the answer in this other issue:

If you use window.scrollTo(x,y) to scroll an element into the viewport then animateIn should be triggered, however if you use it to scroll past an element then the animation might not be triggered as the scroll listener is throttled to only be called every 50 milliseconds.

Update: I removed the throttler from the component. Still the same problem. Oh well.