Morphing Background

A morphing background item that transitions from one element position to another.

How to

Use this component to create morphing background effects that move from a target element to another on mouse hover or click.

The .morph-bg element is the animated background. It automatically takes the size and position of the elements with the data-morph-bg="{id}" data attribute.

To connect the morphing background element to its targets, make sure the ID value of the first one is equal to the data-morph-bg value of the second one.

The morphing background element and its targets need to be wrapped inside a .js-morph-bg-wrapper element with a CSS position different from static (e.g., position: relative).

<div class="position-relative js-morph-bg-wrapper">  
  <ul>
    <li data-morph-bg="morph-bg-1">Item 1</li>
    <li data-morph-bg="morph-bg-1">Item 2</li>
    <li data-morph-bg="morph-bg-1">Item 3</li>
  </ul>

  <span aria-hidden="true" class="morph-bg js-morph-bg" id="morph-bg-1"></span>
</div>

Hover effect #

By default, the .js-morph-bg element transitions from a target to another on click. If you want the effect to be triggered on hover, add the data-morph-bg-event="hover" to the morphing element:

<span aria-hidden="true" class="morph-bg js-morph-bg" id="morph-bg-1" data-morph-bg-event="hover"></span>

Default selection #

The morphing element is not visible by default upon loading. If you want it to be visible from the beginning, add data-morph-bg-active to the element that should be used as the starting target:

<div class="position-relative js-morph-bg-wrapper">  
  <ul>
    <li data-morph-bg="morph-bg-1" data-morph-bg-active>Item 1</li> <!-- this will be used as the initial position of the .js-morph-bg element -->
    <li data-morph-bg="morph-bg-1">Item 2</li>
    <li data-morph-bg="morph-bg-1">Item 3</li>
  </ul>
  
  <span aria-hidden="true" class="morph-bg js-morph-bg" id="morph-bg-1"></span>
</div>

Target and background dimension #

By default, the morphing background takes the size and position of the target elements with the data-morph-bg="{id}" data attribute. There may be cases when you want to use an element as target of the hover/click event, and a child element as the reference for the size/position of the morph background. In this case, add the data-morph-bg-target attribute to the child elements:

<div class="position-relative js-morph-bg-wrapper">  
  <ul class="inline-flex">
    <li data-morph-bg="morph-bg-1">
      <span data-morph-bg-target>Item 1</span>
    </li>
  
    <li data-morph-bg="morph-bg-1">
      <span data-morph-bg-target>Longer item 2</span>
    </li>
  
    <li data-morph-bg="morph-bg-1">
      <span data-morph-bg-target>Item 3</span>
    </li>
  </ul>
  
  <span aria-hidden="true" class="morph-bg js-morph-bg" id="morph-bg-1" data-morph-bg-event="hover"></span>
</div>

Preserve the effect #

If there's a gap between two targets, the morphing animation won't work. To prevent that, add data-morph-bg-preserve to a parent that contains all the targets.

<div class="position-relative js-morph-bg-wrapper">  
  <ul class="flex gap-sm" data-morph-bg-preserve> <!-- 👈 -->
    <li data-morph-bg="morph-bg-1"></li>
    <li data-morph-bg="morph-bg-1"></li>
    <!-- ... -->
  </ul>
  
  <span class="morph-bg js-morph-bg" id="morph-bg-1"></span>
</div>

Categories

• Effects > Scroll
• Plugins > Misc

Bug report & feedback

Component Github page ↗