Slide flickers when is entering the viewport

[dcosmin2003]

Describe the bug
Elements are flickering when entering the viewport.

To Reproduce
Steps to reproduce the behavior:

1. Go to CodeSandbox
2. Scroll down slowly
3. See how elements entering the viewport are flickering

CodeSandbox link: https://codesandbox.io/s/magical-elbakyan-g9u1e5?file=/src/App.tsx

Expected behavior
A smooth scrolling effect.

Desktop (please complete the following information):

• OS: macOS
• Browser [chrome, safari]
• Version [109.0.5414.119]

[dcosmin2003]

Hi @morellodev, I'm thinking of migrating from react-reveal to react-awesome-reveal, but this looks like a blocker to me, can you tell me if there's any workaround for this?
Thank you!

[mpeardev]

I had the same problem, after several days of rain and hot coffee I managed to discover a momentary solution at the time of writing this message. Using version 4.1.0 until they implement an updated solution.

[chambaz]

In case helpful for others, I just tried downgrading to 4.1.0 and worked for me also. Thanks @mirkoperamas!

[morellodev]

I am investigating 👀

[sniper365]

I am here with same issue on version 4.1.0
When can we get the solution?

chrome_A609tt2u8l.mp4

[Nevemoire]

I had the same problem, after several days of rain and hot coffee I managed to discover a momentary solution at the time of writing this message. Using version 4.1.0 until they implement an updated solution.

ty a lot, problem solved <3

[RMarmolejo90]

I get flickering from the Slide animation when it enters the viewport.

[stephenkarpeles]

Also get flickering on Zoom animation, even on version 4.1.0. Anyone have a magic fix yet?

[stephenkarpeles]

One solution I found that seems to work is adding style={{ backfaceVisibility: 'hidden' }} to the parent element. Working for Zoom and Slide animation.

[abdullahmehboob20s]

Version 4.1.0 solved the issue for me

[tom-ricci]

I'm 99% sure that this bug is caused by the browser occasionally hanging for a frame or two before starting animations, so when the element is mounted into the DOM it shows up as the style defined by its CSS instead of the beginning state of the animation. For now it's fixable by applying the beginning state of the animation as a style to the element. For example, with Tailwind's opacity-0 class you can solve the flicker on <Fade/>:

<Fade className={"opacity-0"}><p>I will gently appear as I enter the viewport</p></Fade>

[Bro3Simon]

Also get flickering on Zoom animation, even on version 4.1.0. Anyone have a magic fix yet?

@stephenkarpeles, I also had the same issue for Zoom and solved it by downgrading to 4.1.0.