Nelle parole della skill
ScrollTrigger è il plugin di GSAP per le animazioni legate allo scroll: attiva tween e timeline in corrispondenza di posizioni di scroll, fissa (pin) le sezioni, esegue lo scrubbing del progresso in base allo scroll e guida una timeline attraverso un intervallo start/end.
Illustra per intero il vocabolario di configurazione — trigger, start/end incluso clamp() e valori relativi, endTrigger, scrub, toggleActions, pin e pinSpacing, snap, scroller, id, refreshPriority — e aggiunge ScrollTrigger.batch() per reveal scaglionati che arrivano insieme, scrollerProxy() per scroller fluidi di terze parti e containerAnimation per un falso scroll orizzontale. I valori predefiniti sono indicati per ogni opzione, insieme a una checklist di best practice e a un elenco esplicito di cose da non fare che riguarda il cleanup in React, l'ordine di refresh, l'ease e i marker residui.
Che cosa produce
- Un tween o una timeline il cui progresso è legato alla posizione di scroll attraverso l'intervallo start-to-end del trigger.
- Un ScrollTrigger autonomo creato senza un tween collegato, usato con callback per comportamenti personalizzati come l'aggiornamento della UI a partire da self.progress.
- Un Array di istanze ScrollTrigger, una per ogni target del batch, restituito da ScrollTrigger.batch().
- Tween nidificati che si attivano in base al movimento orizzontale prodotto da un tween containerAnimation.
Come funziona
- 01Registrare il Plugin una Volta
ScrollTrigger viene distribuito come plugin e non come parte dell'API di animazione principale, quindi viene registrato una sola volta dopo il caricamento dello script, prima che venga eseguita qualsiasi configurazione scrollTrigger.
- 02Collegare una Configurazione scrollTrigger
Un tween o una timeline riceve un oggetto scrollTrigger che indica l'elemento trigger più uno start e un end che descrivono la posizione del trigger rispetto alla posizione del viewport.
- 03Scegliere Come lo Scroll Guida il Playhead
Scrub collega il progresso in modo continuo alla posizione di scroll, opzionalmente con un ritardo numerico di recupero, mentre toggleActions attiva azioni discrete di play/reverse ai quattro punti di attraversamento.
- 04Fissare una Sezione e Fare lo Scrub di una Timeline
Il pinning mantiene fisso l'elemento trigger mentre l'intervallo è attivo, e una timeline collegata a quel ScrollTrigger fa avanzare i suoi figli lungo lo stesso intervallo da start a end.
- 05Raggruppare Elementi che Arrivano Insieme
ScrollTrigger.batch() crea un ScrollTrigger per ogni target e raccoglie i relativi callback in un breve intervallo, in modo che gli elementi che entrano quasi contemporaneamente possano essere animati con uno stagger in un'unica chiamata.
- 06Distruggere le Istanze Quando il Contenuto Scompare
La rimozione di elementi animati o il cambio di pagina, come in una single-page app, richiede di distruggere le istanze associate affinché non continuino a funzionare su elementi non più validi.