GSAP TimeLine Animation (On page load), (On hover)

MrRobot

Администратор форума
Команда форума
Администратор

MrRobot

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

Итак, что нам понадобится, так это сам гсап, его можно найти тут
Далее, находим gsap.js и выбираем там Copy Script Tag
1592737588318.png


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

Код:

JavaScript:
// Создаём константу, выбирая объект, который будет анимироваться
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();
 
Сверху