🔍About SA5's Trigger Lib
About the SA5 Trigger Library
Last updated
Was this helpful?
About the SA5 Trigger Library
Last updated
Was this helpful?
Much of SA5's most notable developments have been behavioral. Show or hide items, connect things to the position of a video, perform actions as your slider advances. As a result we've been rethinking how triggers, actions, and events work in SA5.
This library is being re-conceptualized and is likely to be absorbed into SA6 Core.
SA5's Trigger lib was originally about triggering an interaction such as a pop-up modal from a click event. The user clicks something and we trigger an interaction event.
This was useful for;
Displaying a modal from a nav button click
Displaying a pop-up definition when clicking on a linked term in a blog post
Displaying a modal when the user clicks a map pin
This concept has expanded significantly, and we're re-conceptualizing everything;
The types of trigger events we want to support
The resulting actions that we want to support
The model connecting those two
At the center of this model is a more versatile structure we refer to as Trigger-Event-Action ( TEA ).
This is the simplest TEA arrangement.
Here's the basic mechanic. Elements in your webpage are marked up with attributes that identify the Triggers, Events, and Actions you want configured.
A Trigger is fired, such as a button click
This invokes the specified Event
The Event then performs the specified Actions
Let's look at a simple example;
Here's an example of a click Trigger, which invokes my-event.
When a user clicks this button, SA5 invokes the Event named my-event.
This in turn performs whatever Actions are connected to my-event.
By itself, the above construction does nothing, because the Event is not connected to any Actions.
Let's add an Action to a Webflow tab, so that clicking the button clicks ( and changes to ) that specific tab.
Here's an example;
When the my-event Event is invoked, a click Action will be performed on this tab.
In this construction;
wfu-action-click indicates the type of Action that will be performed
my-event indicates the Event
The element itself is where the Action will be performed.
The Event is the center of the TEA architecture, and there are two crucial concepts to understand here that grant you a huge amount of flexibility in your designs;
Any number of Triggers can invoke the same Event.
When the Event is invoked, any number of Actions may be performed.
If you're familiar with systems engineering, TEA follows a familiar Pub/Sub style pattern.
Here are a few types of SA5 Triggers we're working on, which can invoke SA5 Events;
User triggers. Click, scroll, hover, etc.
Systems triggers. Timers, etc.
Webflow triggers.
Interactions, at any point in the interaction.
Possibly, certain other system.level mechanics... open or close of a hamburger menu
Tab switches
Slider events
Custom triggers. Custom code-triggered events.
Breakpoint change triggers.
Keyboard triggers.
Mutation Observer triggers.
Custom triggers.
Other triggers.
An SA5 Event is effectively a messaging pipeline, which has a name that you assign. When an event fires, it triggers a series of SA5 Actions.
Multiple Triggers can invoke the same Event.
An Event can perform several Actions
FUTURE NOTE
We're considering the ability for a single Trigger to invoke multiple Events.
For example, wfu-trigger-click = event1,event2,event3
If built, this may be limited to certain trigger types, owever at this point we have not identified key use cases where this adds substantial value.
An SA5 Action is a resulting action that can be invoked when an SA5 Event occurs.
Examples;
A click on another element
Navigation
A webhook call
A logged event
A GTM event
etc.
FUTURE NOTE We're also considering the concept of a Trigger as an Action type, so that we can chain Trigger-Event-Action sequences.
Here are some rough examples;
This model handles an unthinkable number of possible use cases.
Mirror click. Clicking one button clicks another.
Form submit. Clicking a non-form-submit button triggers a form submission.
There may evolve a distinction between Named Events and Unnamed Events
Named Events can be invoked directly from script
Concept
Triggers are centralized around the concept of a named event.
A
UNDER CONSIDERATION
In some scenarios there may be detail or context bundled into the event, which can affect the Action.
Considering;
Sub-triggers, such as ##link items for
Invoke dictionary pop-ups
Map pin pop-ups
Trigger chatbots, with content
Trigger AI chatbots ( like Gista ) with a query
Trigger GTM datalayer and events
Need to be mindful of preventing unrestrained circular event firing.
E.g. differentiate between user-triggered and code-triggered clicks
