Global Interactions

The Interactions extension allows you to apply actions ( eg: Add, Remove, Toggle a CSS class ), based on triggers initiated by the user ( eg: Click, Hover ), browser events ( eg: Page load ), or events dispatched by elements and extensions from Breakdance and Elements Hive ( eg: Slide Next, Animation Complete ).

Interactions

The extension allows you to create a list of Global Interactions.

• Trigger Category: The trigger category.
  • Selector: Use elements with the specified CSS Selector as the trigger origin.
  • Page: Page Triggers.
• Selector: A Valid CSS selector
• Trigger: The trigger that will initiate the interaction. This list will be different depending on the chosen Trigger Category.
  • Click: Triggers on mouse Click, on Tap for touch devices, Space/Enter keys with keyboards.
  • Mouse/Pointer Enter: Triggers on mouse Hover and Tap for touch devices.
  • Mouse/Pointer Leave: Triggers on mouse Leave. On touch devices, this will be when a user removes a finger or stylus from the element.
  • Focus: Triggers when an element receives Focus.
  • Blur (Unfocus): Trigger when an element loses Focus.
  • On Scroll: Trigger when an element reaches a given position on the viewport.
  • Breakdance: Triggers for Breakdance elements and extensions. See Breakdance Trigger below for a list of supported elements and extensions.
  • Elements Hive: Triggers for Breakdance elements and extensions. See Elements Hive Trigger below for a list of supported elements and extensions.
  • Page Load: Triggers when the page finishes loading.
  • Mouse Leave Window: Triggers when the mouse leaves the window ( eg: When the user goes to the browser address bar )
  • Window Resize: Triggers when the browser window resizes
• Trigger Location Element ( Top to bottom ): The vertical position of the element in % to use for the On Scroll Trigger
• Trigger Location Viewport ( Top to bottom ): The vertical position of the viewport in % to use for the On Scroll Trigger
• Scroll Direction: The scroll direction to use for the On Scroll Trigger
  • Down: On scroll down
  • Up: On scroll up
  • Down&Up: On both scroll down and up
• Breakdance Trigger: List of Breakdance elements and extensions that have trigger integrations.
  • Lottie Animation: Use events dispatched by the Breakdance Lottie element as triggers. The below events will be shown in the dynamic control called Event.
    • On Start: When the animation begins.
    • On Complete: When the animation ends.
  • Swiper-based Slider: Use events dispatched by Swiper ( Basic/Advanced slider elements, background slider in section element, etc…). The below events will be shown in the dynamic control called Event.
    • On Slide Change Start: Triggers at the start of a slide change.
    • On Slide Change End: Triggers at the end of a slide change.
    • On Next Slide Start: Triggers at the start of changing to the next slide.
    • On Next Slide End: Triggers at the end of changing to the next slide.
    • On Previous Slide Start: Triggers at the start of changing to the previous slide.
    • On Previous Slide End: Triggers at the end of changing to the previous slide.
• Elements Hive Triggers: List of Elements Hive elements and extensions that have trigger integrations.
  • Elements Hive Entrance Animations: Use events dispatched by the Elements Hive Entrance Animations. Note: This assumes an Elements Hive entrance animation is already configured on the target element.  The below events will be shown in the dynamic control called Event.
    • On Start: When the animation begins.
    • On Complete: When the animation ends.
• Action: The Action to apply when the trigger is initiated.
  • Set Attribute: Set CSS classes or data attributes.
  • Remove Attribute: Remove CSS classes or data attributes.
  • Toggle Attribute: Toggle CSS classes or data attributes.
    • Attribute Type: The type of attribute.
  • Set CSS Variable: Set a CSS custom property. 
    • Name: The name of the CSS variable.
    • Value: The value of the data attribute, CSS class, or variable depending on the chosen option above.
  • Modify Text Content: Modify the textContent property of a DOM element.
  • Media ( Video or Audio element ): Control the playback of an HTML media element. Note: The target element should be a <video> or <audio> HTML tag. When using the Breakdance Video element, only locally hosted videos are supported!
    • Media Action: The media controls.
      • Play: Play media.
      • Pause: Pause media.
      • Stop: Stop media.
  • Breakdance: List of Breakdance elements and extensions that have Action integrations. See Breakdance Action below for a list of supported elements and extensions.
  • Elements Hive: List of Elements Hive elements and extensions that have Action integrations. See Elements Hive Action below for a list of supported elements and extensions.
• Breakdance Action: List of Breakdance elements and extensions that have Action integrations.
  • Lottie Animation: Control the playback of a Breakdance Lottie element.
    • Animation Action: The animation controls.
      • Play: Play the Lottie animation.
      • Pause: Pause the Lottie animation.
      • Stop: Stop the Lottie animation.
      • Play in Reverse: Play the Lottie animation in reverse.
  • Advanced Accordion: Control the Breakdance Advanced Accordion element
    • Advanced Accordion Action: List of actions for the Advanced Accordion element
      • Open Panel: Open the panel specified by the number in the Item # control.
      • Close Panel: Close the panel specified by the number in the Item # control.
      • Toggle Panel: Toggle the panel specified by the number in the Item # control.
      • Open All Panel: Open all the panels.
      • Close All Panel: Close all the panels.
      • Toggle All Panel: Toggle all the panels.
  • Swiper-based Slider: Control Breakdance Swiper-based slider elements and extensions.
    • Slider Action: List of actions for swiper-based slider elements and extensions.
      • Go To Slide: Go to the slide specified by the number in the Item # control.
      • Go To Next: Go to the next slide.
      • Go To Previous: Go to the previous slide.
  • Basic/Advanced Tabs: Control the Breakdance Basic and Advanced Tabs elements.
    • Tabs Action: List of actions for the Breakdance Basic and Advanced Tabs elements.
      • Open Tab: Go to the tab specified by the number in the Item # control.
      • Open Next Tab: Open the next tab.
      • Open Previous Tab: Open the previous tab.
• Elements Hive Action: List of Breakdance elements and extensions that have Action integrations
  • Elements Hive Entrance Animations: Control an Elements Hive entrance animation. Note: This assumes an Elements Hive entrance animation is already configured on the target element.
    • Animation Action: The animation controls.
      • Play: Play the animation.
      • Reset: Reset the animation to its initial state.
      • Fade In: Show the element using a fade-in transition.
      • Fade Out: Hide the element using a fade-out transition.
•  Delay: Add a delay before the interaction is initiated.
• Target: The target element of the interaction
  • Self: The current element itself.
  • Child: A child of the current element that matches the given CSS Selector.
  • Parent: The parent element. The parent element here means, the parent element in the DOM, which may or may not be different than the visual representation inside the Breakdance builder.
  • Closest: Traverses the current element parents up to the root and returns the first element that matches the given CSS Selector.
  • CSS Selector: Another element on the page that can be targeted with any valid CSS selector.
• CSS Selector: A valid CSS Selector of the target element.