GSAP (GreenSock Animation Platform) — это мощная JavaScript-библиотека для создания высокопроизводительных и плавных анимаций на веб-страницах. GSAP широко используется для анимирования HTML-элементов, CSS-свойств, SVG, Canvas, и многого другого. Ниже представлена инструкция по использованию GSAP с примерами на HTML и JavaScript.

Установка GSAP

Подключение через CDN: самый простой способ начать использовать GSAP — это подключить библиотеку через CDN.


<script src="https://daytips.ru/global/gsap/gsap.min.js"></script>

Подключение через npm/yarn: Если вы используете систему сборки, установите GSAP через npm или yarn:


npm install gsap

После подключения вы можете использовать GSAP для анимаций на странице.

Основные концепции GSAP

GSAP использует метод gsap.to() для анимирования свойств объекта или элемента.

1. Простая анимация

Создадим простую анимацию, где элемент перемещается с одного места на другое.

Пример: Анимация движения квадрата


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Basic Animation</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
    <script>
        // Анимация перемещения квадрата
        gsap.to("#box", { duration: 2, x: 300, y: 200 });
    </script>
</body>
</html>

2. Основные параметры анимации

  • duration: продолжительность анимации в секундах.
  • x и y: перемещение элемента по горизонтали и вертикали соответственно.
  • opacity: изменение прозрачности.

Пример: Анимация перемещения и изменения прозрачности


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Opacity Animation</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
    <script>
        // Анимация перемещения и прозрачности
        gsap.to("#box", { duration: 3, x: 300, y: 200, opacity: 0.5 });
    </script>
</body>
</html>

3. Анимация с использованием CSS-свойств

GSAP поддерживает любые CSS-свойства, такие как масштабирование, вращение, изменение цвета и т.д.

Пример: Анимация вращения и масштабирования


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Transform Animation</title>
    <style>
        #circle {
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="circle"></div>

    <script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
    <script>
        // Анимация вращения и масштабирования
        gsap.to("#circle", { duration: 3, rotation: 360, scale: 1.5 });
    </script>
</body>
</html>

4. Использование таймлайнов

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

Пример: Таймлайн анимаций


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Timeline</title>
    <style>
        #square {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="square"></div>

    <script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
    <script>
        // Создаем таймлайн
        let tl = gsap.timeline();

        // Добавляем анимации в таймлайн
        tl.to("#square", { duration: 1, x: 300 })
          .to("#square", { duration: 1, y: 200, backgroundColor: "red" })
          .to("#square", { duration: 1, opacity: 0.5, scale: 1.2 });
    </script>
</body>
</html>

5. Взаимодействие с событиями

GSAP можно использовать в сочетании с событиями JavaScript для создания анимаций по клику, наведению и т.д.

Пример: Анимация по клику на элемент


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Click Event</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script src="https://daytips.ru/global/gsap/gsap.min.js"></script>
    <script>
        // Анимация по клику
        document.getElementById("box").addEventListener("click", function() {
            gsap.to("#box", { duration: 1, rotation: 180, x: 200, y: 150 });
        });
    </script>
</body>
</html>

Заключение

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