Il Problema
Webflow applica le animazioni agli elementi nel DOM al caricamento della pagina. Tuttavia, quando Wized carica dinamicamente gli elementi dopo il caricamento iniziale della pagina, queste animazioni non si applicano in automatico ai nuovi elementi inseriti. Questo può portare a un'esperienza utente meno coinvolgente, statica o persino bloccata laddove si ha l'opacità zero d'ingresso.
In questo articolo, discuterò di due soluzioni per affrontare questo problema: il reset delle interazioni di Webflow utilizzando la Webflow JavaScript API nativa, e l'utilizzo di un controller esterno per far "scattare" (trigger) un'animazione Webflow.
1. Reset delle Interazioni Webflow
Il primo approccio consiste nel resettare completamente tutte le interazioni Webflow in esecuzione utilizzando l'API JavaScript fornita nativamente. Questo metodo ricaricherà da zero (re-inizializzando) le animazioni e script interattivi nella pagina web a cose fatte o al caricamento listati o API Wized.
L'Implementazione
Per procedere col reset dell'intero panorama interazioni di Webflow, puoi incollare il seguente blocco JavaScript in custom Run action:
window.Webflow.destroy();
window.Webflow.ready();
window.Webflow.require("ix2")?.init();Per esempio se noi volessimo riavviare un reset al Webflow Interaction a fine del download e rendering in una determinata list di elementi (per ricaricare il fade-in sugli item generati), potremmo richiamare direttamente da Wized V2 il codice così:
window.Wized = window.Wized || [];
window.Wized.push((Wized) => {
const listElement = Wized.elements.get("listItem");
listElement.on("list", () => {
window.Webflow.destroy();
window.Webflow.ready();
window.Webflow.require("ix2")?.init();
});
});Problematiche e Considerazioni
- Reset Globale Assoluto: Se resetti questo script sappi che ogni singola animazione sull’intera pagina e canvas resetterà d'accensione i trigger ripartendo, quindi non solo quelle dell'oggetto specifico wized e relative all'elemento interessato ricaricato al momento.
- Problema di Stati Iniziali: Se avevi uno switch state position a default per i vari oggetti (pre loader o modali oscurate hidden), anch’essi partiranno nuovamente allo stato d'apertura d’attesa, rompendo un esperienza d'applicazione intera se non è un caso molto basico monolitico di una index html!
2. Utilizzo Controller Esterno Trigger Wized / Webflow Click
Un metodo più stabile ad approccio sicuro si rivela legarsi per mezzo a controller d’esterna manipolazione all’app via tag element interagendone le accensioni (click simulation script) via Wized una volta il pacchetto dati pronti ad elemento popolato o liste chiuse in list o request state isRequesting:false o finished.
Implementazione Al Pulsante d'Avvio Azione
Immagina l'avere un elemento Div blocco o il tag <button> ad incasso di target in un "Click Trigger Webflow Interaction panel". Come puoi far si che parta quando lo chiediamo con un Wized API?:
- Garantisci fin da un avvio locale Webflow che ci siano gli invisibili tasti/trigger ed Element base a caricamento DOM.
- In Webflow leghi un intero flusso animato completo su IX2 a un "Click event" scaturente al Tasto (nascosto poi al pubblico user).
- Via Wized ed Azione Action e "Run Custom JS" attivi il trigger simulato dal click del Wized
document.querySelector('#tastoanimato').click();.
Esempio Logico Applicativo e Visivo dell'Editor:
Vantaggi e Considerazioni
- Flessibilità Dedicata ai Controlli: Assicurandosi questo approccio il Webflow lascerà immutato un sito intero potendo noi far agire il solo ed apposito tassello click evento dove strettamente richiestoci su timing appositamente deciso e senza loop d'eventi o resets generici su tutto.
- La Presenza degli Asset Al Caricamento Base: Elementi scatenanti e base di Target per tale tattica impongono però da vincolo base a costruzione progetto Webflow d'esser interamente pre-esposti nel template. Dunque scordati appenderli nel file post chiamate, sennò il JS Webflow su event click interaction fallirà non vedendo l'istanza originale nel file! Dunque tieni nel DOM gli elementi in Hide prima d'assoggettare trigger action.
Riassunto e Sintesi
Sinteticamente a riassunto per la grande gestione integrazione Webflow Interaction con le moderne web app sviluppate ad incastro Wized:
- La Logica ai Grandi Riavvi / Resets Webflow Interactions API: Logica apposita globalmente a resettare stati generici; rischiosissimi per app complesse ad iterazione se non a maniere coscenziosamente progettate nel sito.
- Usi su Controllori a base d’Avvio Esterni: Questa via ti mette saldamente al timone operativo a comandi diretti di JS trigger per ogni cosa con interazioni puntuali apposta che impatteranno ciò dove realmente miriamo preservandone il circondario!
Quale intraprendere su percorsi progettuali a venire starà sempre in rapporto ai casi stretti che ti affronti su app e layout webflow. Ricorda a resettare se breve list e nient’altro; avvolgendoti i polsi ed optare di JS click su Controller Elements per grande respiro scalabile custom Wized/Webflow. Sfruttando e consolidando ambo i flussi ne giomerei una forte sicurezza sul restituire design sempre fluidamente animati ad altissime prestazioni per app in produzione ed altamente fruibili a Webflow App ecosistema dinamico d’esperienza front-end!
