Get Elements Hive

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

 

Looking for Element Interactions? see here

 

 

Note: Interactions are only visible on the front end!

 

The Global Interactions dependencies will only load on a page when one of the specified interactions applies to the current page.

 

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.
    • Scatter Container: Use events dispatched by the Scatter Container. The below events will be shown in the dynamic control called Event.
      • On Start: When the scatter animation starts
      • On Complete: When the scatter animation ends
    • Pulse Paths: Use events dispatched by the Pulse Paths. The below events will be shown in the dynamic control called Event.
      • On Start: When the pulse animation starts
      • On Complete: When the pulse animation ends
    • Circular Image Carousel: Use events dispatched by the Circula Image Carousel. The below events will be shown in the dynamic control called Event.
      • On Entrance Animation Start: When the entrance animation part starts
      • On Entrance Animation Complete: When the entrance animation part ends
      • On Rotation Animation Start: When the rotation animation part starts
      • On Rotation Animation Complete: When the rotation animation part ends
  • Item # ( 1, 2 etc ): For certain Trigger and Action types, you have to target a certain element’s child items ( example: Slider action, Pulse Paths trigger etc ) This option expects a number starting from 1 to target the correct item.
  • 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.
    • Entrance Animation: Control the Breakdance Entrance Animation applied to an element
      • Animation Action: List of actions for the Breakdance Entrance Animation
        • Play: Play the entrance animation
        • Reset: Reset the entrance animation
        • Toggle: Toggle the entrance animation
  • 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.
    • Content Reveal Container: Actions that affect a Content Reveal Container element
      • Content Reveal Container Action
        • Toggle Container: Toggle the Content Reveal Container
    • 3D Globe: Actions that affect a 3D Globe element
      • 3D Globe Action
        • Go To Location: Go to the location specified by the location label specified in the Value control
        • Go To Next Location: Go to the next location
        • Go To Previous Location: Go to the previous location
        • Enable Auto Rotate: Enable Auto Rotate animation
        • Disable Auto Rotate: Disable Auto Rotate animation
        • Toggle Auto Rotate: Toggle Auto Rotate animation. If disable, it will be enabled and vice versa
        • Enable Draggable: Enable Draggable interaction
        • Disable Draggable: Disable Draggable interaction
        • Toggle Draggable: Toggle Draggable interaction. If disable, it will be enabled and vice versa
    • Scatter Container: Actions that affect a Scatter Container element
      • Scatter Container Action
        • Play Animation: Play the scatter animation
        • Reverse Animation: Reverse the scatter animation
        • Replay Animation: Replay the scatter animation
    • Content Accordion: Actions that affect a Content Accordion element
      • Content Accordion Action
        • Toggle Panel: Toggle the panel specified in the Item # control
        • Open Next Panel: Open the next panel
        • Open Previous Panel: Open the previous panel
        • Close Opened Panel: Close the opened panel
        • Start Autoplay: Start Autoplay animation
        • Stop Autoplay: Stop Autoplay animation
        • Toggle Autoplay: Toggle Autoplay animation
    • Pulse Paths: Actions that affect an element that has Pulse Paths extension enabled
      • Pulse Paths Action
        • Animate: Animate the pulse effect on the path item specified in the Items # control
    • Circular Image Carousel: Actions that affect a Circular Image Carousel
      • Circular Image Carousel Action
        • Play Entrance Animation: Play the entrance animation
        • Rotate Next: Rotate to the next image
        • Rotate Previous: Rotate to the previous image
  •  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.