Хей, имам нещо специално за теб!
Попълни имейл адрес, на който до минута ще получиш обещаното ;)
Какво си представяш, когато чуеш уеб анимиране? Веднага ти давам жокер – не става въпрос за GIF на Гру от „Аз, проклетникът“, който да ти помахва от началната страница 😀 В случая говорим за интеракции, каквито можем да видим по сайтове, които печелят награди в платформи като AWWWARDS, FWA, CSSDA и други.
За да не те карам да си го представяш, споделям ти няколко от любимите си креативни уебсайтове:
В днешният урок реших да засегна една тема, свързана със съвременните уеб сайтове и да ти дам насока, в случай, че смяташ да се занимаваш с това (разбирай creative front-end developer).
Но първо малко…
В днешно време уеб анимациите са навсякъде, почти всяка уеб реклама, уебсайт, уеб приложение или програма, която работи в браузър, съдържа някакъв вид уеб анимация, някои от които са много леки и очти незабележими, други пък – сложни и комплексни, но не винаги е било така.
Преди да можем да създаваме уеб анимации, уебсайтовете бяха просто обикновени документи, които можеха да се свързват само с други обикновени документи. Ето как изглеждаше първият създаден някога уебсайт, дори преди появата на CSS:
Доста скучно, нали?!
После в историята на уеб се появяват и GIF-овете, а след тях и Flash – технология, която вероятно по-младите читатели дори не са чували или виждали, но благодарение на която уеб беше интерактивен дълги години.
След спирането на Flash уеб стана отново статичен, но за кратко. Новостите в CSS позволяваха на разработчиците да създават микро анимации с т.нар. keyframes, а и самият HTML бе напреднал достатъчно, за да „изнесе“ такъв тип интерактивност на плещите си.
С все по-блуждаещото внимание на потребителите бизнеса и разбработчиците осъзнаха, че за да бъде предпочитан, уебсайта им трябва да се отличава от масовката. И какъв по-добър начин от уеб анимациите за осъществяване на тази цел.
Така се появиха и първите JavaScript библиотеки, чието приложение и цел бе да правят уеб интерактивен, интересен и дори забавен.
Точно с такава JavaScript библиотека ще те запозная днес и това е…
The GreenSock Animation Platform (накратко GSAP) е мощна JavaScript библиотека, която позволява на разработчиците (front-end) и дизайнерите да създават креативни анимации, базирани на времева линия (timeline). Това позволява прецизен контрол за по-ангажиращи анимирани последователности, каквито CSS свойствата не биха могли да предложат.
Освен всичко – 1) библиотеката е лека и не би утежнила особено проекта, 2) безплатна е в своята същина (но за това след малко).
Не. Или поне за по-простите анимации и интеракции няма да са ти нужни експертни знания по JavaScript. Разбира се, основни концепции (като какво е променлива, как се инициализира функция) са необходими, а колкото по-големи са познанията ти в този програмен език, толкова по-лесно ще усвоиш библиотеката.
Но нека не губим повече време в теория, а…
Има повече от един начин да инсталираш тази JavaScript библиотека, като за целите на този урок аз ще използвам инсталацията чрез CDN (която също така препоръчвам за начинаещи разработчици).
Навигирай до сайта на GSAP и страница Installation, където ще откриеш всички линкове, които са необходими за инсталиране през CDN:
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
Ще забележиш, че когато отидеш на опция CDN има възможност да избереш и кои плъгини да бъдат добавени в линка, макар че за целите на този урок няма да инсталираме допълнителни функционалности за библиотеката:
Във видеото към този урок ще видиш подробно концепцията на GSAP и как се прилага, но тук накратко ще мина през основните точки.
Когато започнеш да се изучаваш GSAP, една от първите концепции, с които ще се сблъскаш е т.нар. tween
. Това е и основата на всяка GSAP анимация, затова е добре схванеш как работи и как се създава още в самото начало.
Сам по себе си, всеки tween
е една единица за анимация. Казано на български – един tween
ще анимира един елемент. А това може да се случи по един от следните три начина:
gsap.from()
– тук определяме началните стпйности на селектирания елемент, крайните такива са определени посредством CSS:
gsap.from(".logo", { opacity: 0, y: '20px', delay: 1 });
gsap.to()
– по този начин указваме до какво състояние да стигне елемента, който анимираме:
gsap.to(".astronaut", { opacity: 1, width: "350px", rotate: '30deg', delay: 3.5, });
gsap.fromTo()
– по този начин определяме както началните, така и крайните CSS стойности, които искаме таргетирания елемент да възприеме:
gsap.fromTo(
".hero-image", { x: '0px', opacity: 0, }, { x: '100px', opacity: 1, }
);
Нещо важно, което искам да отбележа тук: селектирането на HTML елементи в GSAP става по същия начин, по който ги селектираме чрез CSS или чрез querySelector в JavaScript – по клас .element
, по ID – #element
и по таг nav
.
Да кажем, че работим по по-комплексни интеракции и имаме повече от 2-3 анимации в дадена секция. Тогава най-удачно би било да използваме т.нат. timeline
, който на практика представлява клъстър (сбор) от tween
-ове.
Нека вземем трите snippet-a от горе и ги добавим в един общ timeline:
timeline
.from(".header", { y: '-100%', ease: "bounce" })
.from(".logo", { opacity: 0, y: "20px", })
.from(".header-link", { opacity: 0, stagger: 0.5 })
.from(".title", { opacity: 0, x: "-300px", ease: "bounce", })
.to(".astronaut", { opacity: 1, width: '350px', rotate: '30deg', })
Какво прави timeline
-a? Както виждаш, тук всички delay стойности са премахнати. И това е така, защото нямаме нужда от нас. timeline
на GSAP обединява всички tween
-ове в един scope и се грижи да следи последователността на анимациите и да стартира дадена анимация тогава, когато предшестващата е вече приключила.
В своята същина GSAP е безплатен за употреба. Има, обаче, допълнителни плъгини, чрез които може да направиш анимациите на уеб сайта, над който работиш next level (сещаш ли се, като тези от AWWWARDS).
Това е един от вероятно най-използваните плъгини на GSAP, който ти позволява да обвързваш създадените анимации със скролирането по страницата. Може да разгледш примери и как се работи с него тук.
ScrollTrigger.create({
trigger: '#id',
start: 'top top',
endTrigger: '#otherID',
end: 'bottom 50%+=100px',
});
С DrawSVG на GSAP можеш да изчертаваш SVG stroke-ове по начин, който да е интересен и да допълва ScrollTrigger (например колкото повече потребителя скролва по страницата, толкова повече се „разкрива“ дадения елемент). Може да научиш повече за DrawSVG тук.
gsap.from(".draw-me", {duration:1,stagger: 0.1, drawSVG: 0});
GSAP улеснява създаването и манипулирането на анимации (tween
-ове), които пък могат да бъдат групирани в timeline
функции, при това дори ако имаш много малко или дори никакво познание по JavaScript. С плъгини като Scrolltrigger и DrawSVG може да отведеш потребителя на пътешествие из страницата, превръщайки преживяването му в игра.
Това беше малка част от различните анимации, които можете да правиш с GSAP. Насърчавам те да посетиш сайта на GSAP и да свалиш/инсталираш библиотеката, след което да експериментираш. Ще откриеш, че е забавно, довери ми се 😉
Fun fact: в дните, в които работих по този урок ходих да гледам прожекцията на Fly me to the Moon – различен прочит на кацането на екипа на Армстронг на Луната. Какво си взех от филмът ли? Мечтите се превръщат в реалност, колкото и непостижими да изглеждат, тогава, когато усърдно работим за случването им.
// "to" tween - animate to provided values
gsap.to(".selector", { // selector text, Array, or object
x: 100, // any properties (not limited to CSS)
backgroundColor: "red", // camelCase
duration: 1, // seconds
delay: 0.5,
ease: "power2.inOut",
stagger: 0.1, // stagger start times
paused: true, // default is false
overwrite: "auto", // default is false
repeat: 2, // number of repeats (-1 for infinite)
repeatDelay: 1, // seconds between repeats
repeatRefresh: true, // invalidates on each repeat
yoyo: true, // if true > A-B-B-A, if false > A-B-A-B
yoyoEase: true, // or ease like "power2"
immediateRender: false,
onComplete: () => {
console.log("finished")
},
// other callbacks:
// onStart, onUpdate, onRepeat, onReverseComplete
});
// Create a timeline
let tl = gsap.timeline({
delay: 0.5,
paused: true, // default is false
repeat: 2, // number of repeats (-1 for infinite)
repeatDelay: 1, // seconds between repeats
repeatRefresh: true, // invalidates on each repeat
yoyo: true, // if true > A-B-B-A, if false > A-B-A-B
defaults: {
// children inherit these defaults
duration: 1,
ease: 'none'
},
smoothChildTiming: true,
autoRemoveChildren: true,
onComplete: () => {
console.log("finished")
},
// other callbacks:
// onStart, onUpdate, onRepeat, onReverseComplete
});
scrollTrigger: {
trigger: ".selector", // selector or element
start: "top center", // [trigger] [scroller] positions
end: "20px 80%", // [trigger] [scroller] positions
// or relative amount: "+=500"
scrub: true, // or time (in seconds) to catch up
pin: true, // or selector or element to pin
markers: true, // only during development!
toggleActions: "play pause resume reset",
// other actions: complete reverse none
toggleClass: "active",
fastScrollEnd: true, // or velocity number
containerAnimation: tween, // linear animation
id: "my-id",
anticipatePin: 1, // may help avoid jump
snap: {
snapTo: 1 / 10, // progress increment
// or "labels" or function or Array
duration: 0.5,
directional: true,
ease: "power3",
onComplete: callback,
// other callbacks: onStart, onInterrupt
},
pinReparent: true, // moves to documentElement during pin
pinSpacing: false,
pinType: "transform" // or "fixed"
pinnedContainer: ".selector",
preventOverlaps: true, // or arbitrary string
once: true,
endTrigger: ".selector", // selector or element
horizontal: true, // switches mode
invalidateOnRefresh: true, // clears start values on refresh
refreshPriority: 1, // influence refresh order
onEnter: callback
// other callbacks:
// onLeave, onEnterBack, onLeaveBack, onUpdate,
// onToggle, onRefresh, onRefreshInit, onScrubComplete
}
На 27.10.2024 ще се проведе интензивен workshop „Уеб анимации с JavaScript и CSS„, по време на който ще анимираме вече изграден front-end – ще създаваме tween-ове, ще правим по-сложни transition-и и ще инсталираме Lenis smooth scroll.
Виж повече информация и запази своето място тук.