GreenSock (GSAP) анимации. JavaScript анимации. Базовые моменты.

🔥 Обе сборки можно получить по ссылке:

🏆 Поднять мотивацию и получить плюшки(исходники, чат со мной):
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886

⏱️ Тайм-коды: ⏱️
00:00 Вступление
01:33 Обзор результата
03:10 Обзор верстки
05:40 Как анимировать элементы через библиотеку gsap
07:20 Создаем TimeLine. Анимация подзаголовка
10:15 Анимация заголовка
13:29 Анимация текста
14:19 Анимация кнопок
16:31 Анимация логотипа
18:20 Анимация пунктов меню
19:44 Анимация звезд
22:34 Плагин ScrollTrigger. Анимация Hero Секции
27:21 Анимация background
28:23 Анимация Луны
29:32 Parallax Анимация звезд
34:17 Анимация секции Regions
40:28 Анимация секции Info
43:20 Анимация секции Featured
49:03 Заключение

[lets_try_js]

ПЕРЕЗАЛИВ. Добавил звука. Как сейчас слышно?

[СергейЖелезняк-чя]

Урок полезный. Благодарю. Вдвойне приятно что ты ещё и земляк

[-Liksait-]

Давно хотел начать изучать gsap вот твой ролик сохранил думал когда посмотрю и вот наступил время все четко спасибо за полезный ролик 🎥👨‍💻

[Nebogr]

Спасибо. Побольше уроков для новичков. Берегите себя, автор. С наступающим новым годом вас.

[AntonioBenderas]

Привет!!! Рад что всё норм, хорошие уроки.

[dimitriy]

Хорошее подробное видео, то что надо, Лайк!

[Atractiondj]

Хотел начать изучать GSAP и когда увидел какой большой может получиться функция анимации сказал себе, да ну его нах... можно использовать IntersectionObserver для элементов в поле видимости и создавать CSS анимаций. Вот пример скрипта

const observer = new => {
entries.forEach((entry) => {
if (entry.isIntersecting) {


} else {


}
});
});

const hiddenElements =
hiddenElements.forEach((el) => observer.observe(el));

и вот css

.animeee.hidden {
opacity: 0;
}

.animeee.show {
-webkit-animation: fadeInLeft 1s both;
animation: fadeInLeft 1s both;
}

.animeee.show:nth-child(2) {animation-delay: .2s;}
.animeee.show:nth-child(3) {animation-delay: .4s;}
.animeee.show:nth-child(4) {animation-delay: .6s;}
.animeee.show:nth-child(5) {animation-delay: .8s;}
.animeee.show:nth-child(6) {animation-delay: 1s;}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

И кто то скажет что ой тут надо много писать... а я скажу такой код проще администировать, а если его писать на SCSS то еще проще

.animeee.hidden {
opacity: 0;
}

.animeee.show {
animation: fadeInLeft 1s both;

@for $i from 2 through 6 {
&:nth-child(#{$i}) {
animation-delay: 200ms * ($i - 1);
}
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

В общем благодарю за старания, но я учить GSAP не буду из-за возможности поддержки и оптимизации кода

[ЕгорЕгорович-дт]

Чудово, навіть така невеличка частина ліби але так ефектно.Дякую

[elevaalex]

Как-то пробовал jsap в работе. Красиво конечно получается, но вылез геморой: перестала работать внутристраничная навигация. Если будете пробовать, поймете о чем я. Пришлось ее тоже через jsap реализовать, вроде плагин ScrollTo использовал для этого.

Короче для себя я решил, что это прикольная вещь если делаешь свой блог или какой-нибудь лендос для мероприятия. Но не для серьезных бизнес проектов.

P.S. это только мое мнение. В целом библиотека норм.

[nshebeko]

очень классно, давай еще ролики по treejs)

[INTTable]

жду следующий видос про гринсок и скролл анимацию

[ЕленаКиїв]

Дуже дякую за такий чудовий урок! Навіть мені, новачку, все зрозуміло! Сподіваюсь ще побачити багато таких чудових відео від Вас! ))

[Nebogr]

А вы можете прикреплять файл с готовым кодом урока, чтоб мы могли скачать и тренироваться вместе с вами?

[Sashad]

Спасибо за хороший контент. Я написал вам на эл.почту. Буду рад сотрудничать с вами.

[Uncaught_in_promise]

все красиво, но как оно на мобильных устройствах будет? В наше время около 80% если не больше заходят в интернет с мобильных