Next.js Discord

Discord Forum

Next.js fade animations on scroll

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
Hey! I’d like to add fade-in animations on scroll to my website using IntersectionObserver. However, I want to avoid using IntersectionObserver directly in my components, as this would require client-side rendering and impact my SSR performance and SEO. I have a piece of code that achieves this without affecting SSR, but I’m wondering if there’s a package that can handle these animations while preserving SSR rendering and bot visibility for SEO.

  <html lang="en">
      <head>
        <style
          dangerouslySetInnerHTML={{
            __html: `
          .fade-in { 
            opacity: 1;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
          }
          .fade-in:not(.visible) { 
            opacity: 0; 
            transform: translateY(20px); 
          }
        `,
          }}
        />
      </head>
      <body>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.addEventListener('load', () => {
                const observer = new IntersectionObserver((entries) => {
                  entries.forEach(entry => {
                    if (entry.isIntersecting) {
                      requestAnimationFrame(() => {
                        entry.target.classList.add("visible");
                      });
                      observer.unobserve(entry.target);
                    }
                  });
                }, { threshold: 0.1 });

                document.querySelectorAll(".fade-in").forEach(el => observer.observe(el));
              });
            `,
          }}
        />
        {children}
      </body>
    </html>

0 Replies