@barakuda1

Уходит вверх контент от GSAP после обновления страницы, как решить?

Приветствую всех. Подскажите, как решить эту проблему?

При взаимодействии с горизонтальным скроллом, если обновлю страницу, то весь контент компонента перемещается вверх...

export default function HorizontalContent() {
    const itemsRef = useRef(null);
    const triggerRef = useRef(null);

    gsap.registerPlugin(ScrollTrigger);

    useEffect(() => {
        const pin = gsap.fromTo(itemsRef.current, {
            translateX: 0
        }, {
            translateX: "-300vw",
            ease: "none",
            duration: 1,
            scrollTrigger: {
                trigger: triggerRef.current,
                start: "top top",
                end: "2000 top",
                scrub: 0.6,
                pin: true
            }
        })

        return () => {
            pin.kill()
        };
    }, []);

    return (
        <div className={styles.content}>
            <div className={styles.container}>
                <div ref={triggerRef}>
                    <div ref={itemsRef} className={styles.items}>
                        <div className={styles.item}>
                            <Efficiency/>
                        </div>
                        <div className={styles.item}>
                            <h3>Section 2</h3>
                        </div>
                        <div className={styles.item}>
                            <h3>Section 3</h3>
                        </div>
                        <div className={styles.item}>
                            <h3>Section 4</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
  • Вопрос задан
  • 278 просмотров
Пригласить эксперта
Ответы на вопрос 1
scoffs
@scoffs
Frontend | C# | Student
GSAP не сохраняет последнее положение, поэтому всё улетает.

Чтобы решить эту проблему, вам нужно сохранить текущее состояние анимации и восстановить его после перезагрузки страницы. Можно хранить в localStorage или sessionStorage.
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function HorizontalContent() {
  const itemsRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    const items = itemsRef.current;

    const savedPosition = sessionStorage.getItem('animationPosition');
    const initialPosition = savedPosition ? JSON.parse(savedPosition) : { translateX: 0 };

    const pin = gsap.fromTo(
      items,
      initialPosition,
      {
        translateX: '-300vw',
        ease: 'none',
        duration: 1,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: 'top top',
          end: '2000 top',
          scrub: 0.6,
          pin: true,
        },
      }
    );

    ScrollTrigger.addEventListener('refresh', () => {
      // Сохраняем текущую позицию анимации
      sessionStorage.setItem('animationPosition', JSON.stringify({ translateX: pin.progress() * -300 }));
      // Очищаем анимацию
      pin.kill();
      // Восстанавливаем исходное состояние анимации
      pin.progress(0).invalidate().restart();
    });

    return () => {
      pin.kill();
    };
  }, []);

  return (
    <div className={styles.content}>
      <div className={styles.container}>
        <div ref={triggerRef}>
          <div ref={itemsRef} className={styles.items}>
            <div className={styles.item}>
              <Efficiency />
            </div>
            <div className={styles.item}>
              <h3>Section 2</h3>
            </div>
            <div className={styles.item}>
              <h3>Section 3</h3>
            </div>
            <div className={styles.item}>
              <h3>Section 4</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы