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.
