Blendy

You can create as many Blendy instances as needed—whether one per page or per component.

You can specify the animation type in the configuration: 'dynamic' (default) or 'spring'.

// Without configs
const blendy = createBlendy()

// With configs
const blendy = createBlendy({
  animation: 'dynamic' // or spring
})

Blendy requires the source element (the element it's transitioning from) and the target element (the element it's transitioning to) to be specified in order to perform the transition. To do this, assign a unique string ID to each Blendy instance.

To specify the source element, use data-blendy-from="your-id". And to specify the target element use, data-blendy-to="your-id".

The most important thing is to wrap the content of the target and source elements with a single wrapper element, like a div, span, or any other suitable container.

<!-- Source element -->
<button data-blendy-from="foo">
  <!-- Must have a single wrapper element -->
  <span> Open </span>
</button>

<!-- ... -->

<!-- Target element -->
<div class="modal" data-blendy-to="foo">
  <!-- Must have a single wrapper element -->
  <div>
    <!-- Your modal content goes here -->
  </div>
</div>

Typically, the target element won't be on the page until it's revealed (e.g., by clicking a button). Once it's visible, call blendy.toggle('your-id') to trigger the expanding animation.

When an element is removed or hidden, call blendy.untoggle('your-id') to trigger the collapsing animation. Note that for closing, you should usually wait for the animation to finish before removing the element from the page. You can handle this by passing a callback as the second argument to untoggle.

// Create blendy instance
const blendy = createBlendy()

// ...

// This function should be called somewhere in your app to open the modal.
function showModal() {
  // Setting this to true will show the modal
  isModalOpen = true

  // Here's the blendy code (in this example, foo is the id I've chosen)
  blendy.toggle('foo')
}

// This function should be called somewhere in your app to close the modal.
function CloseModal() {
  blendy.untoggle('foo', () => {
    // The modal should be closed after the untoggle animation is done.
    isModalOpen = false
  })
}

Blendy needs to access the DOM to work. In other words, make sure that the source element (with data-blendy-from) is loaded before instantiating Blendy.

To support new elements added after the page has loaded, use blendy.update().

// Create blendy instance
const blendy = createBlendy()

// ...

// Call this after a new element is loaded on the page.
blendy.update()