Get Elements Hive

Pulse Paths

Create paths between elements in your sections and animate a pulse along the path. The extension can be used to craft modern SaaS Integration Sections, bespoke interactions, backgrounds, and more.

Pulse Paths

The extension allows you to create a list of paths using a combination of source and target elements in the same section.

  • Source Element: The source element for the current path
    • Self: The current element itself
    • Child: A child element
  • Child Element CSS Selector: The CSS selector of the child element
  • Target Element CSS Selector: The CSS selector of the target element
  • Trigger: Controls when the Pulse Animation starts
    • Trigger Type: The trigger type for when the Pulse Animation starts
      • Page Load: When the page loads
      • Delayed: When the page loads and after the defined delay
        • Delay: The delay after which the Pulse Animation starts
      • Using Interactions: The Pulse Animation will optionally be initiated via the Interactions extension
  • Path: The settings for the path
    • Color: The color of the path ( Give it an Alpha channel of zero if you want a transparent path )
    • Apply Glow: Applies a glow effect to the path
    • Width: The width of the path
    • Curvature: Control the curve of the path
  • Pulse: The settings for the pulse
    • Size: The length of the pulse in percentage relative to the total length of the path
    • Color 1: The first stop color of the gradient that makes up the pulse. Color 1 and Color 2 can be the same if you want a solid color, alpha channel is also supported
    • Color 2: The second stop color of the gradient that makes up the pulse. Color 1 and Color 2 can be the same if you want a solid color, alpha channel is also supported
    • Apply Glow: Applies a glow effect to the pulse. Note: Glow is expensive on animated elements, depending on what else is going on on your page, if you see jank during the pulse animation, consider turning off glow.
    • Direction: The direction of the pulse animation. From Source to Target or from Target to Source
    • Easing: The pulse animation easing
    • Duration: The animation duration
    • Delay: The animation delay