ScrollTrigger не работает после навигации по маршруту в Next.js (работает на локальном хосте, прерывается в производстве ⇐ Javascript

[Anonymous]

У меня возникла странная проблема со ScrollTrigger в моем приложении Next.js, и мне действительно нужна помощь.
Что происходит
У меня на домашней странице есть раздел, который использует GSAP ScrollTrigger для закрепления и анимации при прокрутке. Вот что самое странное:

• Когда я впервые посещаю домашнюю страницу (или обновляю ее), все работает отлично. Раздел отлично закрепляется и анимируется.
• Но когда я перехожу на другую страницу, а затем возвращаюсь на главную, ScrollTrigger просто перестает работать. Раздел больше не закрепляется, и анимация не запускается.

Самая запутанная часть
Это происходит только в рабочей среде! На локальном хосте все работает нормально, даже когда я перемещаюсь между страницами вперед и назад. Но на моем основном сервере он ломается каждый раз, когда я возвращаюсь на домашнюю страницу.
Мой код
'use client';

import React, { useRef } from 'react';
import { usePathname } from 'next/navigation';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';

gsap.registerPlugin(ScrollTrigger);

const ProcessSection = () => {
const sectionRef = useRef(null);
const pathname = usePathname();

useGSAP(() => {
if (pathname !== '/') return;

const el = sectionRef.current;
if (!el) return;

const q = gsap.utils.selector(el);
const isMobile = window.innerWidth < 768;
const scrollDistance = isMobile ? 1500 : 2000;

const tl = gsap.timeline()
.to({}, { duration: 0.4 })
// Slide 1 -> 2
.to(q('.slide-0'), { top: '100%', duration: 0.25, ease: 'power2.inOut' })
.to(q('.slide-1'), { top: '0%', duration: 0.25, ease: 'power2.inOut' }, '

Подробнее здесь: https://stackoverflow.com/questions/798 ... -localhost