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: animation complete ).

 

Note: Interactions are only visible on the frontend!

 

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.
    • 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 trigger element.
      • On Start: When the animation begins.
      • On Complete: When the animation ends.
    • Lottie Animation: Use Events dispatched by the Breakdance Lottie element.
      • On Start: When the animation begins.
      • On Complete: When the animation ends.
    • Page Load: When the page finishes loading.
  • 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.
    • 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.
    • 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.
    • 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.
  •  Delay: Add a delay before the interaction is initiated.
  • Target: The target element of the interaction
    • Self: The element itself.
    • 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.
    • 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.