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

Question

[barakuda1]

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

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

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>
    );
};

Answer 1

[Семён Окулов]

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>
  );
};

Comments

[barakuda1]

Разве, не предусмотрено никакого функционала, который позволил бы просто при первом рендере компонента обнулять позицию? Мне кажется, что сохранение в storage - это слишком тяжелый способ решения подобной проблемы.

[Семён Окулов]

barakuda1, если вы хотите обнулить позицию при первом рендере компонента без сохранения состояния, вы можете использовать useRef для отслеживания, был ли компонент уже отрисован.
Если вы хотите что-то типа такого, то вот это

import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const HorizontalContent = () => {
  const itemsRef = useRef(null);
  const triggerRef = useRef(null);
  const isFirstRender = useRef(true); // Ссылка на состояние первого рендера

  useEffect(() => {
    if (isFirstRender.current) {
      // Проверяем, является ли это первым рендером компонента
      isFirstRender.current = false;
      return;
    }

    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>
        </div>
      </div>
    </div>
  );
};

export default HorizontalContent;

[barakuda1]

Семён Окулов, вы уверены в своем предложенном решении или это ответы с ChatGPT?)

[Семён Окулов]

barakuda1, ответы с гпт, но GSAP из коробки не предоставляет функционала, который вам нужен

[barakuda1]

Семён Окулов, им я тоже могу воспользоваться, никакое из ваших предоставленных решений мне не подходит.