Kom igång med Greensock Animation Platform

Greensock Animation Platform (GSAP) gör att du kan animera allt du kan komma åt med JavaScript, inklusive DOM, Canvas och CSS, liksom dina egna anpassade objekt.

GSAP hjälper också till att lösa webbläsare inkonsekvenser för enklare användartestning (Bra webbhotell Kan också hjälpa till), gör att du kan använda objekt för att hantera komplexa animationer och går upp till 20 gånger snabbare än jquery. Det har blivit en standard i branschen, och har använts på otaliga prisbelönta webbplatser. Har du en webbplats att bygga? Här är vår guide till det bästa Website Builder runt omkring.

01. Ställ in en grundläggande HTML-fil

Det bästa sättet att lära sig GSAP är att se det i aktion. I den här handledningen lär du dig om de viktigaste funktionerna i plattformen med arbetsexempel som du kan använda i dina projekt idag!

Kom igång med att konfigurera en grundläggande HTML-fil, där du kan släppa i din JavaScript-kod. Inkludera en bild med a logotyp klass. Du använder GSAP för att animera egenskaper för att se hur det fungerar.

 & lt; html lang = "en" & gt;
& lt; huvud & gt;
  & lt; stil & gt;
    .Logo {Bredd: 150px; }
  & LT; / Style & GT;
& LT; / Head & GT;
& lt; kropp & gt;
& lt; img class = "logo"
src = "logo.svg" / & gt;
& lt; script & gt;
// Kod här
& lt; / script & gt;
& LT; / Body & GT;
& lt; / html & gt; 

02. Inkludera GSAP-biblioteket

Därefter måste du lägga till GSAP till ditt webbprojekt. Mellan din & lt; bild & gt; och & lt; script & gt; Taggar, sätt in en länk till GSAP-biblioteket. Du kan ladda ner zip direkt från här eller ta det från det Github (Om du har filer att dela, välj det perfekta molnlagring ). Filerna är också värd på Super-Fast CloudFlare CDN, så det enklaste sättet är att använda de värdfiler som denna:

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js" & gt; & lt; / script & gt; 

03. Animera med tweening

Tweening är processen att ändra ett värde över tiden för att skapa en animering. Till exempel flyttar ett objekt från A till B, skalar det, eller roterar det. Du kan också tween dina egna anpassade värden.

Det enklaste sättet att tween en egendom är att använda Tweenmax.to () fungera. Detta behöver ett målobjekt, en varaktighet och egendom / värdepar du animerar. För att se funktionen i aktion, prova var och en av kodlinjerna nedan med hjälp av logotyp som målobjektet:

 // tween x position från nuvarande
till 400 över 2 sekunder
Tweenmax.to (". Logo", 2, {x: 400});
// tween y Position från nuvarande
till 200 och opacitet till 0, över 1
andra
Tweenmax.to (". Logo", 1, {y: 200, opacitet: 0});
// tween x och y till 100, skala till
1,5, och rotera 90 °, över 2
andra
Tweenmax.to (". Logo", 2, {x: 100, y: 100, skala: 1,5, rotation: 90}); 

04. Tween från och från till

Du kan tween en egendom från sitt nuvarande värde till en ny med till() , men du kan också tween från ett värde till dess nuvarande värde. Till exempel, om du logotyp börjar vid x position 0 Och du vill att den ska sluta dit, du kan göra det här:

 tweenmax.from (". Logo", 2, {x: 400}); 

I det här fallet kommer din logotyp omedelbart att flytta till x = 400 och sedan tween till x = 0 . Du kan även definiera både start- och slutvärdena, ignorerar de aktuella värdena med från till() så här:

 tweenmax.fromto (". Logo", 2, {x: 400}, {x: 200}); 

05. Easinging

Easing är "stil" av animering, som värderingar övergång från A till B. I stället för en konstant hastighet, som kallas "linjär", kan du tillämpa funktioner för att kurva hastigheten. Börjar de långsamt och gradvis påskynda? Kommer de till ett abrupt stopp och studsa lite i slutet? I animering lägger dessa stilar karaktär och känslor till ditt arbete. Du kan tillämpa en lättnadsfunktion så här:

 tweenmax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, lätta: cirk.easin}); 

06. Lätta funktioner och in / ut

GSAP innehåller en mängd olika lättnadsfunktioner, som tillbaka , studsa , elastisk , synd , cirk och expo . Du kanske också har märkt att lätthet funktion har en egenskap av enkel , som vi använde i steg ovan. Du kan också använda lätthet och enkel . Dessa indikerar var den lättnadskurvan appliceras i animationen. Prova följande för att se resultaten:

 // lättar med en studsa
Tweenmax.to (". Logo", 2, {x: 100, y: 100, rotation: 90, lätta: bounce.easeout});
// lättar in och ut med elastik
Tweenmax.to (". Logotyp", 2, {x: 100, y: 100, rotation: 90, lätta: elastisk.easeInout}); 

07. Fördröja en Tween

Ibland vill du fördröja starten på en animering, antingen för att synkronisera den med en annan animering, eller för att få det att vänta på att en händelse ska uppstå. Du kan använda en annan GSAPs speciella egenskaper som heter dröjsmål att göra detta. Prova följande kod för att se hur du kan fördröja tweens för specifik tid:

 tweenmax.to (". Logo", 1, {y: 100, lätta: bounce.easeout});
// Fördröjning denna Tween med 1 sek
Tweenmax.to (". Logo", 1, {Rotation: 90, Lätt: Circ.easout, fördröjning: 1}); 

08. Återuppringningsfunktioner

För att integrera animationer med din kod är det viktigt att veta när händelser inträffar, speciellt när en animering slutar eller börjar. Du kan använda kompense händelse återuppringning för detta. Du kanske vill veta när en Tween börjar, med onstart . Och du kanske också vill synkronisera din Tween med en annan animering, eller använd tween och dess lättnad för att uppdatera något annat anpassat objekt. Använd onupdate Återuppringning för detta. Så här använder du återuppringningen:

 tweenmax.to (". Logotyp", 1, {
Y: 100,
Lätt: Bounce.easeout,
Oncomplete: TweenComplete
});
funktion tweencomplete () {
Console.log ("Tween Complete");
} 

09. Återuppringningsparametrar

Vid skjutning av återkopplingar kanske du vill skicka information tillsammans med återuppringningen till den funktion som hanterar den. Du kan behöva skicka information om den som ringer eller specifika värden. Detta gör att du kan integrera dina animeringar med resten av din kodbas. Alla parametrar passeras via Återuppringning + "Params" , det är OnupdateParams .

I följande exempel kan du spåra framstegen i Tween med sökordet {själv} och kan se hur man passerar flera parametrar med hjälp av en array:

 tweenmax.to (". Logotyp", 1, {
Y: 100,
Lätt: Bounce.easeout,
OnUpdate: tweenupdate,
OnupdateParams: ["{Self}",
"avslutad"]
});
funktion tweenupdate (tween,
meddelande) {
var procentuell = mellan.
framsteg () * 100; // framsteg ()
är ett värde 0-1
Console.log (procenttal +
"" -meddelande);
} 

10. Kontrollera animationer

Okej, så du kan nu skapa tweens och lätta tweens, branduppringningar och parametrar. Men hur kontrollerar du animationer? Ofta vill du starta eller stoppa dem baserat på andra evenemang.

Om du behöver stoppa en animering kan du använda paus() metod. Om du vill återuppta en tween, använd återuppta() . Att helt förstöra en tween användning döda() . Prova följande och se vad som händer:

 // var för att hålla referens till Tween
var tween = tweenmax.to (".
Logo ", 2, {Y: 100, Lätt: Bounce.
lättare});
// Pausa omedelbart
tween.Pause ();
// Start på händelse
SettimeOut (funktion () {Tween.
återuppta ()}, 1000);
// omvänd animering på händelse
SettimeOut (funktion () {Tween.
omvänd ()}, 3000); 

11. CSS och CSSPLUGIN

CSSPLUGIN ingår när du använder Tweenmax . Det är en stor tidsbesparare, eftersom den normaliserar beteenden över webbläsare och automatiskt detekterar när det behövs för animationer. CSSPlugin kan hantera färg tweens, SVG-animationer och optimerad prestanda med caching och andra interna tricks - och det är ofta effektivare att översätta positioner via CSS.

Du har redan sett detta i aktion när du använde opacitet och placera animationer. Det fungerar utan speciell kodning!

12. 2D och 3D-transformer

CSS-transformationer gör att du kan skala, rotera översätter och skev. De arbetar både 2D och 3D för att skapa vackra effekter snabbt. GSAP inkluderar inbyggda transformationsegenskaper som x , y , rotation , rotation , rotation , skeva och skala . Försök att tillämpa följande Tween till din bild istället för de som vi redan har försökt:

 tweenmax.to (". Logotyp", 3, {
X: 100,
Y: 100,
Skala: 1,5,
Rotationy: 360,
Lätt: Bounce.easeout}); 

13. Timelines

När du flyttar bortom en eller två tweens kan du undra hur man hanterar flera animationer. GSAP inkluderar a tidslinje objekt att göra exakt det. Du lägger till tweens till tidslinje objekt och kan använda placera parameter efter tween till tiden dem. Du kan få tweens att springa efter varandra, eller ha luckor, eller till och med överlappa dem. Lägg till ett par Fler bilder till din HTML med klasser logo2 och logo3 respektive.

För att se hur det fungerar, prova följande tidslinje koda:

 // Skapa en tidslinjeinstans
Var tl = ny timelinemax ();
tl.add (tweenmax.to (". logo", 1,
{x: 50}));
// notera den slutliga "0" för att göra
Den här börjar vid 0 sek.
tl.add (tweenmax.to (". logo2", 1,
{y: 100}), "0");
// notera "+,25" för att göra detta
En start vid .25 sek
tl.add (tweenmax.to (". logo3", 1,
{rotation: 180, y: 50,
X: 50}), "+. 25"); 

14. Tidslinjekontroll

Förutom att kontrollera animationer kanske du vill kontrollera timelines också. Lyckligtvis kan du pausa, återuppta och omvända precis som du kan med animeringar. Du kan också lägga till parametrar till tidslinjen till upprepa , jojo och lägg till återuppringningar för hela tidslinjen. Du kan också styra en tidslinjes hastighet med hjälp av tidsskala fast egendom. Försök att byta ut din tidslinjeförklaring med följande kod för att se hur det fungerar:

 VAR TL = NEW TIMELINEMAX ({
// upprepa oändligt
Upprepa: -1,
yoyo: sant,}); 

15. Få och ställa in egenskaper

En funktion som är väldigt användbar är att få och ställa in egenskaper hos tweens och timelines. På det sättet kan du lära känna den övergripande framstegen och varaktigheten, eller samla annan information, om ett GSAP-objekt. I det här koden kan du skaffa sig tidslinjens varaktighet, och sedan uppsättning dess varaktighet för att ändra den. Detta fungerar lika för tweens också. Det är ett annat bra sätt att reagera i realtid till evenemang och modifiera animationer i flygningen. Lägg till följande efter din tidigare tidslinje-kod:

 // få den aktuella varaktigheten av
tidslinjen
konsol.log (tl.duration ());
// Ställer upp varaktigheten till 5 sekunder
Efter en 2 sekund vänta
SettimeOut (funktion () {
tl.duration (5);
}, 2000); 

Denna artikel publicerades ursprungligen i Creative Web Design Magazine Web Designer. Köp utgåva 279 eller prenumerera .

Läs mer:

• Super CHARGE SVG Animationer med GSAP
• Exportera efter effekter Animationer till HTML5
• Hur man skapar animationer som skala för alla enheter