Mac OS - Scrolling only updates once you stop scrolling

[silvawebdesigns]

Support

Not sure why, but the animations for me are not updating whilst I'm scrolling. They only seem to update once I stop. Works fine when I press up and down but on constant slow scroll, the animations don't move until I stop.

Here is a video to show the issue I'm having:

https://watch.screencastify.com/v/WT8VpsMEDQH3G56bw1MH

The demo is working fine so I feel like I'm possibly doing something wrong...

I'm importing like so:

import { useParallax, ParallaxProvider, Parallax, useParallaxController } from 'react-scroll-parallax';

Then I am using it like:

<Parallax className={styles.p_blue_box} rotate={['1.2', '1']} scale={['1.7', '1']} translateX={['10%', '18%']} translateY={['-100px', '-100px']}>
  <Image src={assest.blueBox} width={80} height={80} alt="img" />
</Parallax>

Thanks in advance!

[jscottsmith]

This happens when the browser deprioritizes the requestAnimationFrame usually because some other performance issue.

The animation seems simple enough that I bet it would be fine in isolation, so I don't think you are doing anything wrong.

I would profile the performance of the app with Chrome dev tools or even with React dev tools to see if there's any obvious performance issues first like components re-rendering on scroll. The Chrome Rendering tab would also be helpful to discover possible issues.

Hard to say what it may be beyond that, good luck!

[ThomasValois]

In case this is still relevant. I found that my issue with this was caused by using a height & width of 100% on body & HTML in CSS. Removing these worked for me.