Server Side Rendering Initial Load Fade Out / In

Hi there, thank you for your work on this animation framework, it’s exactly what I was searching for.

I’m trying to add it to my single page react app (built using Gatsby). I wrapped my page contents in a simple <Fade></Fade> component and everything is working exactly how I want it to when navigating between pages. The initial page load, however, results in the contents displaying normally, then fading out and fading back in.

Is there a way to disable this behavior? I read the Server-Side Rendering section of the readme, however that leads me to believe that this is the desired result. Is that correct?

I also noticed that on the docs site, some transitions occur when navigating between pages but not when loading directly to that page (ex. the right-side navigation on this page slides up, but this transition is simply ignored if it is the initial site load). How was this accomplished? I don’t mind if the transitions don’t work on the initial load so long as I can avoid the unnecessary fade out / fade in.

I tried setting opacity: 0 in my CSS in hopes that it would remain hidden until the transition fades it in, but that didn’t seem to help.

Steps to reproduce:

1. Open a new browser tab, preferably incognito to avoid caching
2. Visit my site in progress: https://dublife.netlify.com/
3. Watch for the content on the page to load, then fade out and back in a second later.

Thanks in advance!

[jojobagings78]

@applebya You can place in html.js

<noscript>
    <link href="/css/js_disabled.css" type="text/css" rel="stylesheet" />
</noscript>

Then in your js_disabled.css you place

.react-reveal {
  opacity: 1 !important;
}

Basically what it does is when JS is disabled instead of showing nothing it will show everything as it overrides the opacity from the library.

[rnosov]

Well this is kind of intended behaviour, but you can disable it if you put the following code somewhere near the entry point in your app:

// internal function will be removed in 1.2 release
import {ssrFadeout} from 'react-reveal/globals'; 

ssrFadeout(false);

I’m planning to make this option default in 1.2.x and remove the ssrFadeout function. To be honest, there are drawbacks to every solution: With ssrFadeout(false) you won’t get animations on your initial load which might be equally confusing. There is also an internal prop called alwaysReveal ( i might rename it in future ) that will force reveal animation even on initial load but it will make revealed contents invisible to googlebot and people with javascript off. So it will make sense for images and headers. That’s how I animate the frontpage of React Reveal. I’ll probably make the current behaviour an opt in via a prop in 1.2.x