Every rerender causes a new instance to be attached

[austincondiff]

I am using react-scroll-parallax and I am seeing an issue where if it rerenders on scroll in my case, a new instance of typical is attached to the element resulting in very janky visuals.

Screen.Recording.2022-06-01.at.11.00.19.AM.mp4

Edit: Wrapping it in a PureComponent fixes the issue, but I feel like I shouldn't need to do this.

[prashant54singh]

I am using react-scroll-parallax and I am seeing an issue where if it rerenders on scroll in my case, a new instance of typical is attached to the element resulting in very janky visuals.

Screen.Recording.2022-06-01.at.11.00.19.AM.mp4
Edit: Wrapping it in a PureComponent fixes the issue, but I feel like I shouldn't need to do this.

Have you solved this? I could not figure it out. Do you have any alternate solutions?

[austincondiff]

Yeah, use a PureComponent. The problem was that it rerendered every scroll event and each time it did, a new animation was applied to the text on top of the existing animation. Putting it in a PureComponent tells React not to rerender it after it first mounts. If there is a better way to do this, I'd love to hear but this was the best I could do to fix it.