Scroll Animation component does not work with Next.js but worked with create react app

I recently migrated a small project from create react app to next js.

All is fine besides that my code for scroll animations suddenly does not work in Next js and I am not sure why. A it does not throws errors, the animation just does not happen at all. But it worked perfectly fine inside my create react app project.

I am not sure where the issue is. Has anyone a tip?

Thats the component.

 'use client';
import { useEffect, useRef, useState } from 'react';

export interface IProps {
  children: React.ReactNode;
  variant: 'slideFromRight' | 'slideFromLeft';
}

function useIsVisible(ref: React.RefObject<HTMLDivElement>) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      //remove if for more than one animation
      if (entry.isIntersecting) setVisible(entry.isIntersecting);
    });
    if (ref.current !== null && observer.takeRecords().length === 0)
      observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  });

  return visible;
}

export default function ScrollAnimation(props: IProps) {
  //state handling
  const ref = useRef<HTMLDivElement>(null);
  const visible = useIsVisible(ref);

  return (
    <div ref={ref}>
      <div className={visible ? 'animate-' + props.variant : 'notVisible'}>
        {props.children}
      </div>
    </div>
  );
}

And then I import it and wrap it this way:

<ScrollAnimation variant="slideFromRight">
    <h1 className="text-white font-bold text-2xl ">Lorem Ipsum</h1>
        <hr className="border border-white my-4" />
        <p className="text-white font-montserrat text-left font-bold">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industrys standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum
        </p>
      </ScrollAnimation>

the slideFromLeft and Right is declared in my tailwind config:

keyframes: {
        slideFromLeft: {
          '0%': {
            transform: 'translate3d(-100%, 0, 0)',
            visibility: 'hidden',
          },
          '100%': {
            transform: 'translateZ(0)',
          },
        },
        slideFromRight: {
          '0%': {
            transform: 'translate3d(100%, 0, 0)',
            visibility: 'hidden',
          },
          '100%': {
            transform: 'translateZ(0)',
          },
        },
      },
       animation: {
        slideFromLeft: '3s both slideFromLeft ',
        slideFromRight: '3s both slideFromRight ',
      },

Here is a codesandbox with a minimal reproducible code example, but the animation never gets triggered, however the same code works in a create react app (CRA) setup without issues.

Codesanbox

EDIT:

Here are some additional information regarding the answer of Siavash1991.

1. There are no errors in the browser console
2. Intersection Observer is supported in all browsers, I do not use an old environment
3. refCurrent is not null
4. Css animations are correctly defined in my tailwind conf. As I said the same setup works in CRA.
5. Parent component is rendered properly. Same here, the setup is identical on CRA
6. All deps are up to date, I just use react and next and no other deps for the animation
7. Check SSR (Server-Side Rendering) Issues: This component is a client component but the page where I import my animation is not marked with use client. However marking is as use client also did not bring any change
8. Rebuild: I did in fact rebuild the project from scratch. Created a new next project and migrated page by page adapting tot he next js logic.
9. Test in different browsers: Does not work in all major browsers
10. No compat issues
11. Consider using a different animation library: I do not use any animation library, ist my custom code and do not want to. As this would be a regression.

from Scroll Animation component does not work with Next.js but worked with create react app