BubbleMorph

  • QUICK TIP:
    Review the Basic Template Setup for information about how to setup a custom production environment.
To get started with the BubbleMorph Add-On, first add the "revolutions-addons" folder into your production site:
Next, add the BubbleMorph stylesheet and script. The script should placed below all other scripts on the page.

Next, assign a variable to your slider's main settings script as shown in the following example.

Then initialize the BubbleMorph Addon directly after the slider settings (shown above)

Next, add a BubbleMorph Layer

BubbleMorph Layers extend the default Shape Layer, and all BubbleMorph options are written in responsive format.

  • data-bubblesbgThe background color for the bubbles
  • data-numbubblesThe max number of morph bends
  • data-bubblesbufferxAdds a horizontal buffer to help prevent bleeding outside the slider
  • data-bubblesbufferyAdds a vertical buffer to help prevent bleeding outside the slider
  • data-bubblesspeedxThe shape movement's horizontal speed
  • data-bubblesspeedyThe shape movement's vertical speed
  • data-bubblesbordercolorBorder color if used
  • data-bubblesbordersizeOptional border to apply to the shape