Get Elements Hive

Element 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 ).

 

Looking for Global Interactions? see here

 

 

Note: Interactions are only visible on the front end!

 

Interactions

The extension allows you to create a list of interactions on the given element.

  • Trigger Category: The trigger category.
    • Self: Element Triggers.
    • Page: Page Triggers.
  • 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.