# Globális GSAP animációk: egyszer mentve, mindenhol használható

> Globális görgetési, szöveg- és képanimációk létrehozása a Webhely beállításokban, és alkalmazásuk elemekre.

Ugyanazt az animációt húsz widgetre kézzel beállítani lassú, és a huszonegyedik sosem lesz pont olyan, mint a többi. A bővítmény lehetővé teszi, hogy az animációt egyszer elmentsd az Elementor **Webhely beállításaiban**, és utána egy legördülő listából válaszd ki, ahol kell. Három külön lista van: görgetési animációk bármely elemhez, szövegekhez és képekhez.

Az egyes elemeken használható beállításokról a [GSAP görgetési interakciók fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kiterjesztesek-gsap-gorgetes/) szól.

## Előkészületek

- A **Globális** görgetési animáció az ingyenes bővítményben is megvan, és a Pro-val is ugyanúgy működik.
- Elementor (ingyenes) kell.
- Kapcsold be a kiterjesztéseket a **The Plus Addons → Extensions** oldalon. A **Plus Special** csoportban a **GSAP Scroll Interactions** a globális görgetési animációkhoz kell (béta, alapból ki van kapcsolva). A **Plus Global** csoportban a **Text Animation** (ingyenes) a globális szöveganimációkhoz, az **Image Animation** (Pro) a globális képanimációkhoz kell. A képanimációt használó widgetek (Creative Image, Cascading Image) is Pro widgetek.

| Lista | Bekapcsolandó kiterjesztés | Kiadás |
| --- | --- | --- |
| Global Scroll Interactions | GSAP Scroll Interactions | Ingyenes |
| Global Text Animations | Text Animation | Ingyenes |
| Global Image Animations | Image Animation | Pro, mert a használó widgetek is Pro-sak |

Mindegyik lista csak akkor jelenik meg a Webhely beállításokban, ha a hozzá tartozó kiterjesztés be van kapcsolva.

## A Webhely beállítások megnyitása

Szerkessz bármely oldalt Elementorral, kattints a panel bal felső sarkában az Elementor logóra, és válaszd a **Webhely beállítások** menüpontot. A bekapcsolt listák külön fülként jelennek meg.

## Globális görgetési animáció létrehozása

Nyisd meg a **Global Scroll Interactions** fület, és vegyél fel egy tételt. Az így mentett animáció bármely tárolóra vagy widgetre alkalmazható.

1. Adj az animációnak egyértelmű, egyedi nevet (**Animation Name**). Később név alapján választod ki, ezért a „Szekció felúszik” jobb, mint az „Animációm”.
2. Válassz **Trigger** értéket: **On Load** vagy **On Scroll**.
3. Állítsd be a **Delay**, **Duration** és **Offset** értéket: a várakozást az indulásig, a futási időt, és hogy hány képpontról kezd.
4. Válassz **Animation Style** (Fade, Slide vagy Scale), **Animation Effect** (lassítási görbe) és **Animation Direction** (irány) értéket.
5. Kapcsold be a **Stagger Effect** kapcsolót, ha elemcsoporton használod, majd állítsd be a **Stagger Items** és **Stagger Depth Level** értéket.
6. A **Repeat** csak díszítő elemhez kell, mert megállás nélkül ismétlődik.
7. Mentsd a módosításokat.

A mezők megegyeznek az elemen elérhető **Basic** beállításokkal, csak három felirat hosszabb: az **Animation Style**, **Animation Effect** és **Animation Direction** a widget paneljén **Style**, **Effect** és **Direction**.

### Alkalmazás elemre

1. Nyisd meg az oldalt Elementorban, és jelöld ki a tárolót vagy widgetet.
2. A **Haladó** fülön nyisd meg a **GSAP görgetési interakciók (béta)** szakaszt.
3. Állítsd az **Animation Type** értékét **Global**-ra.
4. A **Global Animation** listából válaszd ki a mentett animációt.

A mentett beállítások az elemre másolódnak: az irány, a távolság, az időtartam, a késleltetés, a stílus és a görbe a listából jön, nem az elemből. Ha az új animáció hiányzik a listából, mentsd az oldalt, és töltsd újra a szerkesztőt, mert a listát a panel betöltésekor olvassa be.

## Globális szöveganimáció létrehozása

Nyisd meg a **Global Text Animations** fület. Ezek az animációk a The Plus Addons Heading Title és Text Block widgetjére vonatkoznak, amelyek a szöveget karakterekre vagy szavakra bontják, és a darabokat animálják.

1. Adj egyedi **Animation Name** nevet.
2. Válassz **Animation Type** értéket. Öt van: **Normal**, **Explode / Scatter**, **Scramble Text**, **Typing Effect** és **Text Style Swap**. A többi mező ettől függően változik.
3. A **Normal** típusnál állítsd be a kezdőpozíciót, a ferdítést, a méretet, a forgatást és a transzformációs origót, majd válassz **Split Type** értéket: **Characters** (karakterek) vagy **Words** (szavak).
4. A **Text Style Swap** típusnál add meg a **Text Color** értéket és a tipográfiát, amire a szöveg vált.
5. Válassz **Animation Trigger** értéket: **On Load**, **On Scroll** vagy **On Hover**. Az **On Scroll** mellett bekapcsolhatod az **Enable Scroll Scrub** kapcsolót, amely az animációt a görgetősávhoz köti.
6. Állítsd be a **Duration**, **Delay** és **Stagger** értéket. A **Stagger** nem kapcsoló, hanem másodpercben megadott távolság az egyes karakterek vagy szavak között.
7. Az **Animation Effects** alatt válassz lassítási görbét, szükség esetén kapcsold be a **Repeat** kapcsolót, majd mentsd.

### Alkalmazás szövegwidgetre

1. Tegyél az oldalra egy Heading Title vagy Text Block widgetet.
2. A **Tartalom** fül **Text Animation** szakaszában kapcsold be az **Enable Animation** kapcsolót.
3. Állítsd az **Animation** értékét **Global**-ra.
4. A **Global Animation** listából válaszd ki az animációt.

## Globális képanimáció létrehozása

Nyisd meg a **Global Image Animations** fület. Ezek a Creative Image és Cascading Image widgetre vonatkoznak, amelyek Pro widgetek.

1. Adj egyedi **Animation Name** nevet.
2. Válassz **Trigger Type** értéket: **On Load**, **On Scroll** vagy **On Hover**. Az **On Scroll** mellett bekapcsolhatod az **Enable Scroll Scrub** kapcsolót.
3. Állítsd be a **Duration** és **Delay** értéket.
4. Add meg a kiinduló állapotot: **X Offset**, **Y Offset**, **Skew X**, **Skew Y**, **Scale**, **Rotation** és **Opacity**, és válassz **Transform Origin** értéket, amely körül a nagyítás és a forgatás történik.
5. Válassz **Clip Path** alakzatot, ha a kép maszkon keresztül fedje fel magát, vagy a **Custom** értéknél írd be a saját értéked a **Custom Clip Path Value** mezőbe.
6. Az **Animation Effects** alatt válassz lassítási görbét, és mentsd.

### Alkalmazás képwidgetre

1. Tegyél az oldalra egy Creative Image vagy Cascading Image widgetet.
2. A **Tartalom** fül **Image Animation** szakaszában kapcsold be az **Enable Animation** kapcsolót.
3. Állítsd az **Animation** értékét **Global**-ra.
4. A **Global Animation** listából válaszd ki az animációt.

## Hogyan viselkedik

- Mindhárom lista a webhely Elementor kitjében (alapbeállításaiban) él, ezért az oldal minden lapján közös, és egy módosítás minden, az animációt használó elemet frissít.
- A globális görgetési animációk az ingyenes bővítményben és a Pro-val is ugyanúgy működnek.
- A globális szöveganimációhoz a **Text Animation**, a globális képanimációhoz az **Image Animation** kiterjesztés és a hozzájuk tartozó Pro widgetek kellenek.
- Az animáció kiválasztásakor a mentett beállítások az elemre másolódnak, ezért az elem saját **Basic** beállításainak utólagos módosítása nem számít.
- A widgetek listája a szerkesztőpanel betöltésekor töltődik, ezért az újonnan mentett animációhoz oldalmentés és újratöltés kell.

## Korlátozások

- A globális görgetési animációban mentett **Trigger** figyelmen kívül marad: akár **On Load**, akár **On Scroll** értéket mentesz, az animáció betöltéskor fut. Ha görgetési indítás kell, állítsd az elemen az **Animation Type** értékét **Basic**-re, és ott válaszd az **On Scroll** triggert.
- Ha a **Global** értéket választod, de nem választasz animációt, az elem akkor is animálódik: sima, 50 képpontos, halványítás nélküli felcsúszást kap. Ha nem kell animáció, hagyd az **Animation Type** értékét **None**-on.
- Ha törölsz egy animációt a listából, minden azt használó elem animáció nélkül marad, a widget listája pedig üres lesz, figyelmeztetés nélkül.
- A listák webhelyszintűek, nem oldalszintűek, és az Elementor kitben tárolódnak, ezért nem utaznak az exportált sablonnal.
- A GSAP görgetési interakciók béta, ezért a beállítások a kiadások között változhatnak.

## Hibaelhárítás

**Hiányzik egy fül a Webhely beállításokból.** Mindegyik fül csak akkor jelenik meg, ha a kiterjesztése be van kapcsolva. Ellenőrizd a **GSAP Scroll Interactions**, **Text Animation** és **Image Animation** kapcsolót a **The Plus Addons → Extensions** oldalon, majd töltsd újra a szerkesztőt.

**Az új animáció nincs a Global Animation listában.** Mentsd az oldalt, és töltsd újra az Elementor szerkesztőt. A lista a panel betöltésekor áll össze, ezért az ugyanabban a munkamenetben létrehozott animáció még nincs benne.

**Az animáció betöltéskor fut, pedig On Scroll triggerrel mentettem.** Ez a globális görgetési animációk ismert korlátja. Állítsd az elemen az **Animation Type** értékét **Basic**-re, és válaszd az **On Scroll** triggert az elem saját listájában.

**A Global Animation lista üres egy képwidgeten.** A globális képanimációhoz az **Image Animation** kiterjesztés kell, és a szakasz csak a Pro Creative Image és Cascading Image widgeten van meg.