# GSAP görgetési interakciók: animáció tárolóra és widgetre

> A GSAP görgetési interakciók kiterjesztés bekapcsolása, az alap és a haladó animáció beállításai, korlátai és hibaelhárítása.

A **GSAP görgetési interakciók (béta)** kiterjesztés a görgetéshez vagy az oldal betöltéséhez kötött animációt ad tárolókhoz és widgetekhez, JavaScript nélkül. Ilyen például egy kártya, amely felúszik, ahogy a látótérbe ér, vagy egy panel, amely a következő szakasz megérkezéséig a helyén marad.

A beállítások a tárolók és widgetek **Haladó** fülén jelennek meg, a **GSAP görgetési interakciók (béta)** szakaszban.

## Előkészületek

- Az **Alap** és a **Globális** animáció az ingyenes bővítményben is megvan, és a teljes (Pro) változattal ugyanúgy működik. A **Haladó** keretanimációkhoz a teljes változat kell.
- Kapcsold be a **GSAP Scroll Interactions** kiterjesztést a **The Plus Addons → Extensions** oldalon, a **Plus Special** csoportban (vagy keress rá: GSAP). Alapból ki van kapcsolva.
- A szakasz neve béta, ezért a beállítások és a viselkedés még változhat.
- Elementor (ingyenes) kell, és egy oldal, amin van mit animálni, például kártyasor vagy nyitóblokk.

## Hol vannak a beállítások

Jelölj ki egy tárolót vagy widgetet, nyisd meg a **Haladó** fület, és bontsd ki a **GSAP görgetési interakciók (béta)** szakaszt. Az első beállítás, az **Animation Type** dönti el, mit látsz alatta.

![A Haladó fül GSAP görgetési interakciók (béta) szakasza az Animation Type listával](./kepek/kiterjesztesek-2-gsap-panel.webp)

*A Haladó fül GSAP görgetési interakciók (béta) szakasza az Animation Type listával* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

A képen az **Animation Type** alapértéke, a **None** látszik: ilyenkor az oldalra semmi nem kerül, és a GSAP szkriptek sem töltődnek be.

| Animation Type | Mit csinál | Kiadás |
| --- | --- | --- |
| **None** | Alapérték. Nincs animáció. | |
| **Global** | Egy, a Webhely beállításokban egyszer elmentett animációt használ újra. | Ingyenes |
| **Basic** | Egyetlen belépő animáció néhány beállítással. | Ingyenes |
| **Advanced** | A görgetési helyzethez kötött, képkockánkénti hatások. | Pro |

## Alap animáció

Állítsd az **Animation Type** értékét **Basic**-re. Egy animáció fut le a kijelölt elemen.

![A Basic animáció beállításai: Trigger, Animation Controls, Motion Settings, Stagger Effect, Repeat](./kepek/kiterjesztesek-2-gsap-alap.webp)

*A Basic animáció beállításai: Trigger, Animation Controls, Motion Settings, Stagger Effect, Repeat* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

A képen az alap animáció teljes beállítássora látszik: az indító, a két szerkesztőgomb (ceruza) és a két kapcsoló.

1. Válaszd ki a **Trigger** értékét. Az **On Load** (alapérték) az oldal megnyitásakor azonnal lejátssza az animációt. Az **On Scroll** megvárja, amíg az elem teteje a képernyő közepére ér.
2. Az **Animation Controls** ceruzagombjával nyisd meg a késleltetés, időtartam és eltolás (offset) beállításait.
3. A **Motion Settings** ceruzagombjával válaszd ki a stílust, a lassítási görbét (effektet) és az irányt.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Trigger | **On Load**: betöltéskor fut; **On Scroll**: akkor, amikor az elem teteje a képernyő közepére ér. | On Load |
| Delay | Hány másodpercet vár az indulás előtt. Ha a Stagger Effect be van kapcsolva, ez a távolság az elemek között is. | 0,15 |
| Duration | Hány másodpercig tart az animáció. A 0 értéket figyelmen kívül hagyja. | 1,5 |
| offset | Milyen messziről indul az elem, képpontban. A 0 értéket figyelmen kívül hagyja. | 50 |
| Style | A **Fade** az átlátszóságot és a helyzetet, a **Slide** és a **Scale** csak a helyzetet vagy a méretet változtatja. | Fade |
| Effect | A lassítási görbe, a Power1 Out-tól a Bounce Out-ig. | Power1 Out |
| Direction | Melyik oldalról érkezik az elem: fentről, lentről, balról vagy jobbról. | Lentről |
| Repeat | Végtelen ciklusban előre-hátra lejátssza az animációt. | Ki |

Az alapértékekkel az elem elhalványulva indul, 50 képpontot emelkedik a helyére, és az oldal betöltése után nagyjából 1,7 másodperccel ér véget.

A **Style** körül könnyű tévedni. Csak a **Fade** módosítja az átlátszóságot. A **Slide** elhalványítás nélkül mozdítja el az elemet, a **Scale** pedig a felére kicsinyített méretről növeli, szintén halványítás nélkül. Ezekkel az elem már mozgás előtt teljesen látszik.

### Elemek egymás után

A **Stagger Effect** bekapcsolásával az elem gyerekei egymás után, nem egyszerre mozdulnak. Két újabb beállítás jelenik meg:

- **Stagger Items**: a **Containers** (alap) a belső tárolókat, a **Widgets** a widgeteket animálja.
- **Stagger Depth Level**: a **Child** csak a közvetlenül benne lévő elemeket éri el, a **Multi Child** a mélyebben beágyazottakat is.
- Az elemek közötti késés az **Animation Controls** késleltetési értéke. Külön lépésköz nincs.

Egy szokásos kártyás elrendezésben a widgetek belső tárolókban vannak, ezért a **Widgets** és a **Child** együtt semmit sem talál, és semmi sem animálódik. Widgetekhez használd a **Multi Child** értéket, vagy hagyd a **Containers** beállítást, és a kártyákat animáld.

### Ismétlés

A **Repeat** addig játssza oda-vissza az animációt, amíg az oldal nyitva van. Az ismétlések számát nem lehet megadni, ezért csak díszítő elemeken használd.

## Mentett animáció használata

Állítsd az **Animation Type** értékét **Global**-ra, és válassz egy tételt a **Global Animation** listából. A lista a Webhely beállítások **Global Scroll Interactions** füléről töltődik, tehát az animációt előbb ott kell létrehozni. A részleteket a [globális animációkról szóló fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kiterjesztesek-gsap-globalis/) tartalmazza.

Ha az épp elmentett animáció hiányzik a listából, mentsd az oldalt, és töltsd újra a szerkesztőt: a lista a panel betöltésekor áll össze.

## Haladó animáció (Pro)

Az **Advanced** értéknél az effekt a görgetési helyzethez kötődik, nem egyszer játszódik le. Az ingyenes bővítményben ez az opció csak frissítési felhívást mutat, és az oldalra semmi nem kerül.

A Pro változatban egy **Add Frame** ismétlő mező jelenik meg. Minden keret egy hatás, saját triggerrel (**On Scroll**, **On Load** vagy **On Hover**) és névvel (**Item Name**). Egy elemhez több keretet is felvehetsz, és mind együtt fut.

### Görgetési beállítások (Scroll Options)

A **Scroll Options** azt határozza meg, hol indul a hatás, és mennyi görgetés kell hozzá. Rejtve van, ha a keret triggere **On Load** vagy **On Hover**.

- **Trigger**: a képernyőnek az a pontja, ahol a hatás elindul, 0 (a nézet teteje) és 1 (az alja) között. Az alapérték 0,5, a képernyő közepe. Minél nagyobb az érték, annál korábban indul.
- **Duration**: hány képpontnyi görgetésre oszlik el a hatás.
- **Offset**: eltolja a kezdőpontot.
- **Dynamic Height**: kapcsoló, alatta egy **Reference Height (px)** mezővel.

### Mozgás (Motion)

A mozgáscsoport az elemet görgetés közben mozgatja és alakítja. Minden hatásnak van kezdő és záró értéke, az elem a kettő között tart az alapján, hogy mennyit görgettél.

- **Vertical** és **Horizontal**: fel, le, balra, jobbra mozgatás.
- **Rotate**: forgatás az X, Y és Z tengelyen, plusz **Position**, **Preserve 3D** és **Perspective**.
- **Scale**: nagyítás vagy kicsinyítés az X, Y és Z tengelyen.
- **Skew**: elferdítés az X és Y tengelyen.

Ha visszagörgetsz, az elem fordított irányban futtatja a hatást, így az oldal mindkét irányban ugyanúgy néz ki.

### Megjelenés (Appearance)

A megjelenéscsoport az elem kinézetét animálja: **Opacity**, **Padding**, **Color**, **Width**, **Border Color**, **Height**, **Font Size**, **Letter Spacing**, **Text Shadow**, **Box Shadow**, **Border Radius** és **Background Color**. Mindegyiknek kezdő és záró értéke van. Az **Opacity** a legjobb választás, ha a tartalmat nem mozgatni, hanem felfedni szeretnéd.

### Vizuális effektek (Visual Effects)

A **Blur**, **Grayscale** és **Brightness** hatásnak is van kezdő és záró értéke. Ezek az elemen belüli widgetekre hatnak, nem az elem saját hátterére. Egy 100-ról 0-ra futó **Grayscale** keret szürkén tartja a tartalmat, amíg odagörgetsz, majd görgetés közben visszahozza a színeket.

A **Brightness Start (%)** és **Brightness End (%)** értékek a 100% fölé adódnak hozzá: a 30 130%-os, a 100 200%-os fényerőt jelent.

### Haladó effektek (Advanced)

Ez a csoport azokat a hatásokat tartalmazza, amelyek az oldal egy másik elemével dolgoznak együtt.

- **Play Video**: görgetéssel tekeri a videót. A The Plus Addons Video Player widgetéhez készült, saját tárhelyű videófájllal. Másold ki a **Video Selector (CSS)** mezőben lévő osztályt a kezdő pont nélkül, és add hozzá a widget **CSS-osztályok** mezőjéhez.
- **Draw SVG**: ugyanígy működik a Draw SVG widgettel. Másold ki az **SVG Selector (CSS)** osztályát, kapcsold be a widget **Connect GSAP Interaction** kapcsolóját, és add az osztályt a widget **CSS-osztályok** mezőjéhez.
- **MotionPath**, **3D Rotate** és **Parallax Effect**. A parallaxhatás csak akkor jelenik meg, ha a keret triggere **On Hover**, és **Horizontal Movement** és **Vertical Movement** értéket kér.

### Haladó beállítások, Sticky és Custom Selector

- **Advanced Options**: a már beállított keret finomhangolása: **Repeat**, **Duration**, **Easing**, **Timing**.
- **Sticky**: rögzíti az elemet, amíg az oldal többi része elhalad mellette, és a keret végén elengedi. A **Z-Index** mező szabályozza, mi fölött legyen.
- **Custom Selector**: a keretet az elem egy részére szűkíti. Írj be egy CSS-választót, és csak a találatok animálódnak, a tároló többi része a helyén marad.
- **Developer Options**: **GSAP Timeline**, **Advanced GSAP Timeline** és egy **Trigger Name** mező a keret elnevezéséhez.
- **Visibility** (a szakasz alján): megmondja, mely eszközökön fusson az animáció. Alapból mind a három be van jelölve. Ha a mobilt kiveszed, a telefonokon nem játszódik le.

## Hogyan viselkedik

- Az **Alap** és a **Globális** animáció ugyanúgy működik az ingyenes bővítményben és a Pro-val is.
- **On Scroll** trigger esetén az animáció akkor indul, amikor az elem teteje a képernyő közepére ér, és visszagörgetéskor visszafelé lejátszódik, minden alkalommal.
- A haladó keret a görgetősávhoz kötött: ha félig görgetted végig, a hatás is félúton jár. Az **On Load** triggerű keretek nem futnak visszafelé.
- Egy elemen több keret egyszerre érvényes, így egy menetben mozgathatod, halványíthatod és homályosíthatod.
- A GSAP szkriptek csak azokra az oldalakra kerülnek, amelyek használják a kiterjesztést.

## Korlátozások

- Az oldal aljához közeli elem **On Scroll** triggerrel esetleg sosem animálódik: ha az oldal nem görgethető addig, hogy az elem teteje a képernyő közepére érjen, az elem láthatatlan marad. Tegyél alá tartalmat, vagy használd az **On Load** triggert.
- A 0 érték figyelmen kívül marad: az **offset** 0 értéknél is 50 képpontot mozog az elem, a **Duration** 0 esetén is körülbelül 1,2 másodpercig tart.
- A **Slide** és a **Scale** nem halványít, ezért belépő animációnak furcsa lehet. Ha meg akarod jeleníteni az elemet, használd a **Fade** stílust.
- A **Repeat** soha nem áll le, és az alap módban nem korlátozható az ismétlések száma.
- A lépcsőzésnek nincs saját időköze, az elemek közötti késés a **Delay** értéke.
- Az elem saját háttere nem homályosodik és nem szürkül a vizuális effektekkel, csak a benne lévő widgetek.
- A **Brightness** értéke a 100% fölé adódik, vagyis a 100 megduplázza a fényerőt.
- A **Parallax Effect** csak hovernél érhető el, és eltűnik, ha a keret triggere **On Scroll** vagy **On Load**.
- A szakasz béta, ezért a kiadások között változhat.

## Hibaelhárítás

**A kiadott oldalon semmi sem animálódik.** Nézd meg, hogy a **GSAP Scroll Interactions** be van-e kapcsolva a **The Plus Addons → Extensions** oldalon, és hogy az **Animation Type** nem **None**-on áll-e. Az ingyenes bővítményben az **Advanced** semmit sem csinál, válaszd helyette a **Basic** értéket.

**A szerkesztőben más látszik, mint az élő oldalon.** Az animációt mindig a közzétett oldalon ítéld meg: nyisd meg előnézetben vagy látogatóként.

**Az elem ott áll, és sosem jelenik meg.** Az **On Scroll** trigger egy az oldal aljához túl közeli elemen. Válts **On Load** triggerre, vagy tegyél alá még egy szakaszt.

**A lépcsőzés semmit sem csinál.** Állítsd a **Stagger Items** értékét **Containers**-re, vagy a **Stagger Depth Level** értékét **Multi Child**-ra, hogy a kártyákba ágyazott widgetek is elérhetők legyenek.

**Az animáció lefut, de az elem nem halványodik be.** A **Motion Settings** alatt állítsd a **Style** értékét **Fade**-re.