Basics
Basic actions are a series of actions that allow you to manipulate certain elements on the page after triggering an event. This includes showing and hiding elements, adding and removing CSS classes, setting and removing attributes, and changing the text content of an element. Each of these actions offers a high level of interactivity and flexibility to create dynamic and responsive user interfaces.
Show
The Show action gives you the possibilty to show a specific element which is initially hidden. By default, it will be set to display: block. But optionally, you can enter a custom value like flex.
Hide
The Hide action allows you to hide a specific element on the page. This can be useful for creating interactive user interfaces, where certain elements are only displayed under specific conditions. It will set the element to display: none.
Add Class
The Add Class action adds a specified css class to an element. This is useful when you want to apply a specific style or behavior to an element under certain conditions after an event is triggered.
Remove Class
The Remove Class action removes a specified css class from an element. This can be helpful when you want to stop a specific style or behavior that has been previously applied to an element after an event is triggered.
Toggle Class
The Toggle Class action allows you to add a specified class if it does not already exist on an element, or remove it if it does. This is useful for toggling styles or behaviors on and off on an element after an event is triggered.
Set Attribute
An attribute is a property of an element in HTML, for example data-item="actions-list". The Set Attribute action allows you to set the value of a specific attribute on an element. It will create the attribute if it does not already exist, or update its value if it does. This is useful for manipulating element properties dynamically.
Remove Attribute
The Remove Attribute action allows you to remove a specific attribute from an element. This can be useful when you want to dynamically alter the properties of an element after an event is triggered.
Change Text
The Change Text action lets you change the text content of a specific element. This can be particularly useful for updating information or status messages based on user interactions or other events. For example, you could change the text of a button after it’s been clicked. This action provides a high degree of interactivity in your application interface.
GSAP
GSAP related actions give you the ability to animate elements on your page in response to events using the GSAP library. This involves not only custom GSAP actions, but also actions created visually using Timelines.
GSAP Timeline
These actions are linked to your GSAP Timelines, which you’ve created under the “Timelines” tab. Once an event is triggered, you can Play, Pause, Restart, Resume, or Reverse a selected timeline. Moreover, you can also adjust the timescale. This means you have the ability to control the speed of your animations. Slowing down or speeding up animations can provide a different user experience, allowing you to customize the interactivity of your application even further.
GSAP Flip
Gsap Flip is a feature that allows you to animate changes to an element’s position or size in the most performant way possible. It is useful for achieving smooth, seamless transitions between different states of an element, enhancing the user’s experience with fluid animations. For example, you could use GSAP Flip to animate CSS properties like display: block to display: grid, facilitating a smooth transition when switching between these two states. This action provides a powerful tool for creating highly responsive and interactive user interfaces.
Official Docs: https://gsap.com/docs/v3/Plugins/Flip/
GSAP Set
The GSAP Set action allows you to immediately set properties of an element, bypassing any transitions. This comes in handy when you need to set initial states or when you need to set properties mid-animation. This action provides a quick and efficient way to manipulate an element’s properties, contributing to a dynamic and interactive user experience.
Official Docs: https://gsap.com/docs/v3/GSAP/gsap.set()/
GSAP From
The GSAP From action lets you animate an element from the specified values to the current ones. This is useful when you want to animate an element into its starting position, or in general, any time you want to animate something into (or from) a specific set of values. For example, you could animate a modal from being off-screen (left: -100%) to its final position (left: 0). This action provides an engaging way to introduce elements on your page.
GSAP To
The GSAP To action allows you to animate an element from its current state to the specified values. This is particularly useful when you want to animate an element to a new position, size, or any other property. For instance, you could animate a button to increase in size when it’s clicked. This action provides a dynamic way to modify elements on your page in response to user interactions.
Video (Self-hosted)
Self-hosted video actions provide control over the playback of video elements within your website.
Play Video
The Play Video action allows you to start the playback of a specific video element. This comes in handy when you want to create interactive video content where playback is controlled by user actions or other events.
Pause Video
The Pause Video action gives you the ability to pause the playback of a specific video element. This is useful for creating interactive video content where the viewer has control over the playback.
Stop Video
The Stop Video action lets you stop the playback of a specific video element completely. This can be beneficial when you need to have full control over the video playback in response to user interactions.
Local/Session Storage
Local and Session Storage are web storage objects that allow you to store data persistently in a user’s browser.
Local Storage stores data with no expiration date which means the data will persist even if the browser is closed or refreshed. This makes it ideal for saving data across multiple visits or sessions.
Session Storage, on the other hand, stores data for one session. The data is deleted when the user closes the specific browser tab.
Set Storage Item
The Set Storage Item action enables you to store a specific item in the local or session storage of the user’s browser. This is useful for preserving user information or preferences across different browsing sessions, enhancing the overall user experience.
Remove Storage Item
The Remove Storage Item action allows you to delete a specific item from the local or session storage. This is particularly useful when you want to clear user-specific data or reset certain settings to their default state.
Bricks
These actions pertain to the elements and functionality of Bricks.
Sync Sliders
This action allows you to easily synchronize two Bricks Sliders by including both IDs.
Forms
Form related actions are operations that can be performed to manipulate or interact with forms on your website. These actions can include populating form fields, validating input data, submitting forms, and more. They help enhance the user experience by providing interactivity and automation in form handling.
Populate Form Field
The Populate Form Field action allows you to automatically fill in a form field with a specific value. This is useful when you want to pre-fill certain information for the user, providing a more seamless and efficient form-filling experience.
Server
Call Ajax Function
The Call Ajax Function action enables you to make AJAX calls to the server. This is particularly useful for sending data in the background without disturbing the user’s interaction with the website. This action automatically generates the code blueprint for your Ajax function. With a Live Update Selector, you can manipulate data in the frontend after the Ajax call has been executed.
Send Email
The Send Email action allows you to programmatically send an email from your application. This is particularly useful for sending notifications or updates to users based on specific events or triggers, enhancing the communication and interaction between your application and its users. This action links to the Email Designer, allowing you to select a template from the Email Designer for your email.
Database: Update Option
The Database: Update Option action allows you to update the value of a particular option in your WordPress database via the update_option function. This can be crucial when you want to modify certain settings or values based on user interactions or other triggers. This action provides an efficient way to manage your WordPress options, contributing to a more dynamic and interactive application.
Database: Delete Option
The Database: Delete Option action allows you to remove a specific option from your WordPress database using the delete_option function. This is useful when you need to eliminate certain settings or values based on specific triggers or user interactions, providing a more flexible and responsive application setup.
Advanced
This section includes some advanced actions that allow you to further customize your websites behavior and responsiveness. These actions offer a greater degree of control, allowing you to write custom code, for instance.
JavaScript
This action allows you to execute custom JavaScript code after an event is triggered. Within your code, you can utilize various variables such as event and trigger.
Other
Other actions that do not fit into the other sections.
Make Confetti
The Make Confetti action triggers a confetti animation on your website. This can be used to celebrate a user’s achievement or add a fun, interactive element to your site.