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

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