I am currently working on implementing a global fade-in animation for all components in my application. By adding the className "fadeIn" to each element and setting the default opacity to 0, I then utilize JavaScript to change it to 1 when the element is visible.
Here is how I have approached this so far. While it does work initially, there is a significant issue that needs addressing. I suspect there may be better methods available, and I would greatly appreciate any suggestions.
The main problem I encounter is that the animation only functions on the initial render. If I navigate to another page and return, all elements are hidden with an opacity of 0, and the script fails to run.
Any guidance on remedying the existing issue or improving the implementation process would be invaluable.
_app.js
function MyApp({ Component, pageProps }) {
return <Provider store={store}>
<Layout>
<PersistGate persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
<FadeIn />
</Layout>
</Provider>
}
export default MyApp
FadeIn component
import React, { useEffect, useState } from 'react'
import Script from 'next/script'
import ReactDOM from 'react-dom';
export default function FadeIn() {
const myScript = (
<Script src='/utils/scripts/appearOnScroll.js' strategy="afterInteractive" />
)
return ReactDOM.createPortal(myScript, document.getElementById('doc-root'));
}
appearOnScroll.js
(function () {
const faders = document.querySelectorAll('.fade-in');
const faderOptions = {
threshold: 1
};
const appearOnScroll = new IntersectionObserver(function (
entries,
appearOnScroll
) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
}, faderOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
})();