Компонент анимации прокрутки не работает с Next.js, но работает с приложением Create React. ⇐ Javascript

[Гость]

Недавно я перенес небольшой проект из приложения Create React в Next JS.

Все в порядке, за исключением того, что мой код анимации прокрутки внезапно не работает в Next js, и я не понимаю, почему. А ошибок не выкидывает, анимация просто не происходит вообще. Но в моем проекте приложения Create React все работало отлично.

Я не уверен, в чем проблема. Есть у кого-нибудь совет?

Это компонент.

'использовать клиент'; импортировать {useEffect, useRef, useState} из «реагировать»; интерфейс экспорта IProps { дети: React.ReactNode; вариант: 'slideFromRight' | 'слайдИзЛева'; } function useIsVisible(ref: React.RefObject) { const [видимый, setVisible] = useState (false); useEffect(() => { const Observer = новый IntersectionObserver(([entry]) => { //удаляем, если для более чем одной анимации если (entry.isIntersecting) setVisible(entry.isIntersecting); }); if (ref.current !== null && Observer.takeRecords().length === 0) наблюдатель.наблюдать(ref.current); возврат () => { наблюдатель.отключить(); }; }); возврат виден; } функция экспорта по умолчанию ScrollAnimation(реквизит: IProps) { //обработка состояния const ref = useRef(null); const видимый = useIsVisible (ссылка); возвращаться ( {реквизит.дети} ); } А затем я импортирую его и обертываю следующим образом:

Lorem Ipsum Lorem Ipsum — это просто макет печатного и версточного текста. промышленность. Lorem Ipsum всегда был стандартным текстом-пустышкой в ​​отрасли. с 1500-х годов, когда неизвестный печатник взял галеру типа и переделал его, чтобы сделать типовую книгу. Оно сохранилось не только пять столетий, но и скачок в электронную верстку, оставаясь по существу неизменными. Он был популяризирован в 1960-х годах благодаря выпуск листов Letraset, содержащих отрывки из Lorem Ipsum, и совсем недавно с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker. включая версии Lorem Ipsum

slideFromLeft и Right объявлены в моей конфигурации попутного ветра:

ключевые кадры: { слайдFromLeft: { '0%': { преобразование: 'translate3d(-100%, 0, 0)', видимость: «скрытый», }, '100%': { преобразование: 'translateZ(0)', }, }, слайдФромРайт: { '0%': { преобразование: 'translate3d(100%, 0, 0)', видимость: «скрытый», }, '100%': { преобразование: 'translateZ(0)', }, }, }, анимация: { SlideFromLeft: '3 секунды оба слайда FromLeft ', SlideFromRight: '3 секунды оба слайда FromRight', }, Вот код и блок с минимальным воспроизводимым примером кода, но анимация никогда не запускается, однако тот же код работает без проблем в настройке приложения Create React (CRA).

Кодесанбокс