Анимация при скролле с GSAP

Создание плавных и захватывающих анимаций, которые реагируют на прокрутку страницы — один из ключевых трендов современного веб-дизайна. И хотя связка GSAP и ScrollTrigger является невероятно мощным инструментом, ее интеграция во фреймворк, такой как Vue, делает процесс разработки еще более структурированным, предсказуемым и проще в поддержке. Vue позволяет декларативно управлять состоянием и элементами DOM, что идеально сочетается с императивной логикой анимаций от GSAP.

Посмотрите на работу компонента ниже. При скролле блоки плавно появляются из-за краев экрана.

<div id="app">
  <div class="app-box" v-for="(item,index) in joke" :key="index" @scroll="handleScroll()">{{ item }}</div>
</div>

#app {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding-block: 10px 50px;
}

.app-heading {
  font-size: clamp(1.5rem, 1.3261rem + 0.8696vi, 2rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.app-box {
  display: grid;
  place-items: center;
  width: min(500px, 100%);
  height: 200px;
  padding: 10px 20px;
  color: #fff;
  background-color: #3498DB;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 40px;
}

// Подключаем GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
// Подключаем ScrollTrigger
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js"></script>
gsap.registerPlugin(ScrollTrigger)
const JOKE = [
	'Решил кот сделать себе личный сайт-визитку.', 
	'Целый день настраивал анимацию при скролле:', 
	'мышка убегает, когда курсор над ней, шарик катится за движением мыши...',
	'Приходит его друг, пёс. Кот с гордостью показывает:',
	'— Смотри, как я наскроллил!',
	'Пёс поскроллил лапой и честно сказал:',
	'— Круто! А где тут кнопка «Еда»?'
]
gsap.registerPlugin(ScrollTrigger)
const {createApp, ref, onMounted} = Vue
createApp({
	setup(){		
		const joke = ref(JOKE)
		onMounted(()=>{
			let box_w = document.querySelector('.app-box').offsetWidth
			let boxes = document.querySelectorAll('.app-box')
			gsap.set(boxes, { x: gsap.utils.wrap([-box_w * 2, box_w * 2]), autoAlpha: 0 })			
			boxes.forEach(box => {
				ScrollTrigger.create({
					trigger: box,
					start: "top 80%",
					toggleActions: 'play none none reverse',
					animation: gsap.to( box, { x: 0, duration: .35, ease: 'back', autoAlpha: 1 } )
				})
			})
		})
		return{joke}
	}
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как это работает: разбор кода

Выше представлен код, который приводит анимацию в действие. Давайте разберем его по частям.

HTML-структура

Верстка проста и создается с помощью директивы v-for. Vue динамически рендерит необходимое количество блоков.

Стилизация (CSS)

Блоки стилизованы так, чтобы быть центрированными и визуально приятными. Ключевой момент — начально они невидимы и смещены (это будет контролироваться GSAP).

JavaScript: Vue и GSAP в симбиозе

Логика состоит из двух частей: инициализации Vue-приложения и настройки анимаций GSAP.

Магия GSAP и ScrollTrigger

Регистрация плагина: Сначала мы сообщаем GSAP о том, что будем использовать ScrollTrigger.
Начальное состояние: С помощью gsap.set мы задаем всем блокам начальное положение x за пределами экрана (слева и справа) и нулевую прозрачность autoAlpha: 0.
Создание триггеров: Для каждого блока создается экземпляр ScrollTrigger. Он настроен так, чтобы запускать анимацию, когда блок попадает в зону видимости start: "top 80%". Анимация — это перемещение блока в исходную позицию x: 0 и плавное проявление autoAlpha: 1. Опция toggleActions обеспечивает обратное воспроизведение анимации при скролле вверх.

Готовы оживить ваш сайт?

Этот пример — лишь малая часть того, что мы можем создать. Динамические анимации при скролле, сложные последовательности, интерактивные элементы — мы готовы воплотить в жизнь любые ваши идеи, чтобы сделать ваш сайт уникальным, современным и запоминающимся.

Наша веб-студия специализируется на создании производительных и визуально впечатляющих веб-решений. Давайте обсудим ваш проект и наполним его жизнью с помощью GSAP, Vue и передовых технологий!

Свяжитесь с нами сегодня для консультации!

Предыдущий Следующий