Гайд GSAP TimeLine Animation (On page load), (On hover)

[HORMAN]

[RU]
Салам алейкум, бродяга пятигорский, как твои успехи в сфере анимаций js?
Видимо хуёво, раз зашёл сюда. Ну ничего, сегодня всё будет чуть лучше.

Итак, что нам понадобится, так это сам гсап, его можно найти

Пожалуйста, авторизуйтесь для просмотра ссылки.

Далее, находим gsap.js и выбираем там Copy Script Tag


Далее заходите к себе в помойку, ставите скрипт, ваш файл тоже должен быть прикручен.

Код:

// Создаём константу, выбирая объект, который будет анимироваться
const headerContent = document.querySelector('.header-content');

// Создаём констатну самого таймлайна
const tl = new gsap.timeline();

// Сама анимация: (От - к) (Можно ставить стилизации css)
// tl.fromTo(объект, время протекания анимации, {стилизация до}, {стилизация после})
tl.fromTo(headerContent, 1, {top: "0%", opacity: "0"}, {top: "50%",opacity: "1"});

// Допустим, вы хотите анимировать несколько объектов, но будет одна проблема, что все анимации будут происходить поочерёдно, это можно исправить.
// tl.fromTo(объект, время, {стилизация до}, {стилизация после}, "-=время")
// "-=время" - это отнятие указанного вами времени от начала, то есть в примере ниже, анимация начнётся в одно время с предыдущей.
tl.fromTo(headerContent, 1, {opacity: "0"}, {opacity: "1"}, "-=1");

//Также, в стилизации можно просто указать x: "30", это сметстит объект по оси x, тоже самое с другой осью.

//У гсапа также есть возможность активироваться при наведении курсора
// Создаём константу, но указываем, что таймлайн будет остановлен:
const tl_stopped = new gsap.timeline({paused:true});
// Создаём анимацию (к):
tl.to(headerContent, 1, {width :"0%"});

//(когда мышь наведена)
    tl_stopped.play();

//(когда мышь увели)
    tl_stopped.reverse();