Уеб анимиране с GSAP за начинаещи

Линк към GitHub repository

Какво си представяш, когато чуеш уеб анимиране? Веднага ти давам жокер – не става въпрос за GIF на Гру от „Аз, проклетникът“, който да ти помахва от началната страница 😀 В случая говорим за интеракции, каквито можем да видим по сайтове, които печелят награди в платформи като AWWWARDS, FWA, CSSDA и други.

За да не те карам да си го представяш, споделям ти няколко от любимите си креативни уебсайтове:

В днешният урок реших да засегна една тема, свързана със съвременните уеб сайтове и да ти дам насока, в случай, че смяташ да се занимаваш с това (разбирай creative front-end developer).

Но първо малко…

История на уеб анимирането

В днешно време уеб анимациите са навсякъде, почти всяка уеб реклама, уебсайт, уеб приложение или програма, която работи в браузър, съдържа някакъв вид уеб анимация, някои от които са много леки и очти незабележими, други пък – сложни и комплексни, но не винаги е било така.

Преди да можем да създаваме уеб анимации, уебсайтовете бяха просто обикновени документи, които можеха да се свързват само с други обикновени документи. Ето как изглеждаше първият създаден някога уебсайт, дори преди появата на CSS:

Доста скучно, нали?!

После в историята на уеб се появяват и GIF-овете, а след тях и Flash – технология, която вероятно по-младите читатели дори не са чували или виждали, но благодарение на която уеб беше интерактивен дълги години.

След спирането на Flash уеб стана отново статичен, но за кратко. Новостите в CSS позволяваха на разработчиците да създават микро анимации с т.нар. keyframes, а и самият HTML бе напреднал достатъчно, за да „изнесе“ такъв тип интерактивност на плещите си.

С все по-блуждаещото внимание на потребителите бизнеса и разбработчиците осъзнаха, че за да бъде предпочитан, уебсайта им трябва да се отличава от масовката. И какъв по-добър начин от уеб анимациите за осъществяване на тази цел.

Така се появиха и първите JavaScript библиотеки, чието приложение и цел бе да правят уеб интерактивен, интересен и дори забавен.

Точно с такава JavaScript библиотека ще те запозная днес и това е…

GSAP by GreenSock

The GreenSock Animation Platform (накратко GSAP) е мощна JavaScript библиотека, която позволява на разработчиците (front-end) и дизайнерите да създават креативни анимации, базирани на времева линия (timeline). Това позволява прецизен контрол за по-ангажиращи анимирани последователности, каквито CSS свойствата не биха могли да предложат.

Освен всичко – 1) библиотеката е лека и не би утежнила особено проекта, 2) безплатна е в своята същина (но за това след малко).

Трябва ли да владееш JavaScript, за да работиш с GSAP

Не. Или поне за по-простите анимации и интеракции няма да са ти нужни експертни знания по JavaScript. Разбира се, основни концепции (като какво е променлива, как се инициализира функция) са необходими, а колкото по-големи са познанията ти в този програмен език, толкова по-лесно ще усвоиш библиотеката.

Но нека не губим повече време в теория, а…

Да започваме

Инсталиране на GSAP

Има повече от един начин да инсталираш тази JavaScript библиотека, като за целите на този урок аз ще използвам инсталацията чрез CDN (която също така препоръчвам за начинаещи разработчици).

Навигирай до сайта на GSAP и страница Installation, където ще откриеш всички линкове, които са необходими за инсталиране през CDN:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Ще забележиш, че когато отидеш на опция CDN има възможност да избереш и кои плъгини да бъдат добавени в линка, макар че за целите на този урок няма да инсталираме допълнителни функционалности за библиотеката:

Концепция на GSAP

Във видеото към този урок ще видиш подробно концепцията на GSAP и как се прилага, но тук накратко ще мина през основните точки.

Tweens

Когато започнеш да се изучаваш 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.

Timeline

Да кажем, че работим по по-комплексни интеракции и имаме повече от 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 плъгини

В своята същина GSAP е безплатен за употреба. Има, обаче, допълнителни плъгини, чрез които може да направиш анимациите на уеб сайта, над който работиш next level (сещаш ли се, като тези от AWWWARDS).

ScrollTrigger

Това е един от вероятно най-използваните плъгини на GSAP, който ти позволява да обвързваш създадените анимации със скролирането по страницата. Може да разгледш примери и как се работи с него тук.

ScrollTrigger.create({
    trigger: '#id',
    start: 'top top',
    endTrigger: '#otherID',
    end: 'bottom 50%+=100px',
});

DrawSVG

С 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 – различен прочит на кацането на екипа на Армстронг на Луната. Какво си взех от филмът ли? Мечтите се превръщат в реалност, колкото и непостижими да изглеждат, тогава, когато усърдно работим за случването им.

Bonus: GSAP Cheatsheet

Basics

// "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
});

Timelines

// 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

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
}

P.S. Ако искаш да научиш още GSAP и уеб анимациите

На 27.10.2024 ще се проведе интензивен workshop „Уеб анимации с JavaScript и CSS„, по време на който ще анимираме вече изграден front-end – ще създаваме tween-ове, ще правим по-сложни transition-и и ще инсталираме Lenis smooth scroll.

Виж повече информация и запази своето място тук.