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

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.

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.

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