GSAP Smooth — это мощное дополнение к библиотеке GSAP, которое используется для создания плавного прокручивания страниц и элементов. Он помогает анимировать скролл страницы или секции с помощью плавных переходов, что улучшает восприятие и делает интерфейс более динамичным.
Ниже приводится полная инструкция по установке и использованию GSAP ScrollSmoother.
1. Установка GSAP и ScrollSmoother
Подключение через CDN
Для подключения GSAP и плагина ScrollSmoother через CDN добавьте следующие строки в HTML-файл:
<script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
<script src="https://daytips.ru/global/gsap/ScrollSmoother.min.js"></script>Установка через npm
Если вы используете npm:
npm install gsap
npm install gsap/ScrollSmoother2. Базовая настройка ScrollSmoother
После подключения плагина можно настроить плавный скроллинг для всей страницы или для определенного элемента.
Пример: Плавный скроллинг для всей страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP ScrollSmoother</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.content {
height: 2000px;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="content">
Плавный скроллинг с GSAP ScrollSmoother!
</div>
<script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
<script src="https://daytips.ru/global/gsap/ScrollSmoother.min.js"></script>
<script>
// Инициализация GSAP ScrollSmoother
gsap.registerPlugin(ScrollSmoother);
ScrollSmoother.create({
wrapper: 'body', // элемент, в котором происходит скроллинг
content: '.content', // элемент, который будет прокручиваться
smooth: 1.5, // плавность скроллинга
effects: true // включить эффекты
});
</script>
</body>
</html>3. Настройка плавности скролла
Вы можете настроить плавность скролла с помощью параметра smooth, который указывает, насколько плавным будет скроллинг. Чем выше значение, тем более плавным будет движение.
Пример с разной плавностью скроллинга
<script>
ScrollSmoother.create({
wrapper: 'body',
content: '.content',
smooth: 2.5, // более плавный скроллинг
effects: true
});
</script>4. Плавный скроллинг внутри элемента
Плагин ScrollSmoother можно применять не только ко всей странице, но и к отдельным элементам. Это удобно, если вам нужно создать прокрутку в определённой секции.
Пример: Плавная прокрутка внутри блока
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scrolling inside a Section</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.scroll-section {
height: 400px;
width: 100%;
overflow-y: auto; /* включаем вертикальную прокрутку */
border: 1px solid #ddd;
}
.content {
height: 1200px;
background: linear-gradient(to bottom, #36d1dc, #5b86e5);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="scroll-section">
<div class="content">
Плавный скроллинг внутри секции
</div>
</div>
<script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
<script src="https://daytips.ru/global/gsap/ScrollSmoother.min.js"></script>
<script>
// Плавный скроллинг внутри элемента
gsap.registerPlugin(ScrollSmoother);
ScrollSmoother.create({
wrapper: '.scroll-section', // скроллимый элемент
content: '.content',
smooth: 2, // плавность
effects: true
});
</script>
</body>
</html>5. Эффекты с прокруткой
Плагин ScrollSmoother также поддерживает различные эффекты для элементов при прокрутке. Например, можно анимировать элементы, которые появятся в зоне видимости при прокрутке.
Пример: Появление элемента с плавным скроллингом
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollSmoother with Scroll Effects</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.content {
height: 2000px;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
margin-top: 800px;
opacity: 0; /* скрываем элемент */
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
<script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
<script src="https://daytips.ru/global/gsap/ScrollSmoother.min.js"></script>
<script>
gsap.registerPlugin(ScrollSmoother, ScrollTrigger);
// Инициализация ScrollSmoother
ScrollSmoother.create({
wrapper: 'body',
content: '.content',
smooth: 1.5
});
// Анимация появления элемента при прокрутке
gsap.from(".box", {
scrollTrigger: {
trigger: ".box",
start: "top 80%", // запускается, когда элемент попадает в область видимости
end: "bottom 20%",
toggleActions: "play none none reverse"
},
opacity: 0,
y: 100, // смещаем элемент по оси Y на 100px
duration: 1
});
</script>
</body>
</html>6. Контроль ScrollSmoother
Вы можете управлять ScrollSmoother динамически через JavaScript, например, остановить его или перезапустить при необходимости.
Пример: Остановка и перезапуск ScrollSmoother
// Остановка скроллинга
ScrollSmoother.get().paused(true);
// Перезапуск скроллинга
ScrollSmoother.get().paused(false);Заключение
GSAP ScrollSmoother — это мощный инструмент для создания плавного скроллинга и анимаций при прокрутке. С его помощью можно легко добавлять плавные анимации к элементам, прокручивать страницы или секции, а также использовать различные эффекты на основе прокрутки.
Эта библиотека прекрасно интегрируется с GSAP, что позволяет использовать всю мощь анимационных возможностей GSAP для создания интерактивных пользовательских интерфейсов.
