DEV Community

Discussion on: Recreating the material design ripple effect in React

Collapse
 
sanishkr profile image
sanish • Edited

Thanks for making this. This is working perfectly except when I have a lot elements having ripple effect and it shows animation only for elements which are visible above the fold. Once I scroll down, animation doesn't seem to be visible. Can you please look into this

Collapse
 
dustinkiselbach profile image
dustinkiselbach

I had the same issue. In the addRipple function, where const x is defined add - window.scrollX at the end, and - window.scrollY where const y is defined at the end. That should fix your problem.

Collapse
 
sanishkr profile image
sanish

Thanks for quick reply. I tried your approach, it worked. I also tried to replace event.pageX and event.pageY with event.clientX and event.clientY. Both works!!