scoffs

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

Открытие окна не производит смены URL, ты остаешься на той же странице, поэтому достаточно странная необходимость делать закрытие модалки при клике на Назад, но это может выглядеть как-то так

import { useHistory } from 'react-router-dom';

function ModalComponent() {
  const history = useHistory();

  const handleCloseModal = () => {
    // Закрытие модального окна и замена текущего пути новым путем (например, '/')
    history.replace('/');
  };

  return (
    <div>
      {/* Ваше содержимое модального окна */}
      <button onClick={handleCloseModal}>Закрыть</button>
    </div>
  );
}

Возможно, что видео не срабатывает или срабатывает не всегда, потому что оно еще не загружено на момент первого рендеринга компонента. Из-за этого обработчик может пропустить событие onLoadedData.

// может использовать onCanPlayThrough ? Или onCanPlay / onPlay
const handleOnCanPlayThrough = () => {
  setLoading(false)
  console.log('Video loaded')
}

<video
  onCanPlayThrough={handleOnCanPlayThrough}
  // ...
>

Возможно надо что-то типа этого:

export default function CheckBox() {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = () => {
        setIsChecked(!isChecked);
    };

    return (
        <div className='todo-item__container-field'>
            <input
                className='todo-item__checkbox'
                type='checkbox'
                name='checkbox'
                checked={isChecked}
                onChange={handleChange}
            />
            <span className='todo-item__span'></span>
        </div>
    );
}

Залил бы в песочницу, чтобы самому можно было потыкать и подебажить

А в чем, собственно, прикол использовать require и import в одном проекте? лучше придерживаться чего-то одного