Чтобы достичь желаемого поведения в горизонтальной анимации с помощью GSAP, вам нужно контролировать, как именно происходит скроллинг, и убедиться, что при достижении последнего слайда скролл переходит к вертикальному.
Вот основные шаги, которые могут помочь вам решить проблему:
1. **Измерьте ширину слайдов**: Измерьте ширину всех ваших слайдов, чтобы знать, когда пользователь достигнет последнего слайда.
2. **Добавьте обработчик событий для скролла**: Используйте слушатели события скролла, чтобы отслеживать, когда пользователь достигает конца горизонтальной секции.
3. **Измените поведение скролла**: Как только вы достигли последнего слайда и пользователь продолжает прокручивать, вам нужно изменить поведение скролла так, чтобы он переходил к вертикальному. Это можно сделать, например, изменяя значение `scrollTop` у родительского элемента.
Вот пример, как это можно реализовать:
```javascript
const horizontalScroll = document.querySelector('.horizontal-scroll');
const totalWidth = horizontalScroll.scrollWidth - window.innerWidth;
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
// Если текущая позиция скролла больше, чем доступная ширина
if (scrollPosition >= totalWidth) {
window.scrollTo(0, scrollPosition - totalWidth + (scrollPosition - totalWidth));
}
});
```
Кроме того, вам нужно будет управлять прокруткой на вашем элементе, чтобы предотвратить прокрутку в пределах вашего слайда. Например, если ширина вашего контейнера не соответствует высоте слайда, это может привести к лишнему скроллу.
Также, если вы используете GSAP, вы можете контролировать анимацию с помощью `ScrollTrigger`. Например:
```javascript
gsap.registerPlugin(ScrollTrigger);
gsap.to(horizontalScroll, {
x: -totalWidth,
ease: 'none',
scrollTrigger: {
trigger: horizontalScroll,
pin: true,
scrub: 1,
end: () => "+=" + totalWidth
}
});
```
Обратите внимание, что `end` указывает, когда должно закончиться ваше горизонтальное скроллирование, что и позволяет переключиться на вертикальное скролл восприятие.
Этот пример должен помочь вам создать более плавный и ожидаемый переход между горизонтальным и вертикальным прокручиванием. Вы можете адаптировать его под ваши нужды, чтобы достичь желаемого эффекта.