Morphing UI Elements Into Another with Blendy.js

Preview:

Description:

Blendy is a lightweight, framework-agnostic JavaScript library that smoothly morphs one element into another, such as transitioning a toggle button into a modal window.

It works with various web dev frameworks, including Vanilla JavaScript, React, Vue, Svelte, and more. Simply specify the source and target elements, and Blendy handles the rest.

Use Cases:

• Modal Windows: Transition a button into a modal window for better user interaction.
• Navigation Menus: Smoothly transform a menu icon into a full navigation menu.
• Image Galleries: Morph thumbnails into full-size images for a dynamic viewing experience.

How to use it:

1. Install & download Blendy via NPM:

# NPM
$ npm install blendy

2. Import the Blendy library into your project.

<script src="/path/to/dist/blendy.min.js"></script>

3. Create a new Blendy instance and choose your preferred animation type:

const blendy = Blendy.createBlendy({
  animation: 'dynamic' // or 'spring'
})

4. Use data-blendy-from="your-id" to mark the source element that you want to transition from. In this example, we’re going to transition a button into a modal window. Note that the content of both the source and target elements must be wrapped into a single container as follows:

<button class="button" data-blendy-from="example">
  <span>Toggle</span>
</button>

5. Define your target element with data-blendy-to="your-id". This is the element you want to transition to (a modal window in this example).

<template id="modal">
  <div class="modal" data-blendy-to="example">
    <div>
      <div class="modal__header">
        <h2 class="modal__title">CSSScript.Com</h2>
        <button class="modal__close"></button>
      </div>
      <div class="modal__content">
        <p>
          A JavaScript & CSS Website
        </p>
      </div>
    </div>
  </div>
</template>

6. Enable the toggle button to transition to the modal window on click:

const button = document.querySelector(".button")
button.addEventListener("click", e => {
  e.stopPropagation()
  document.body.appendChild(modalTemplate.content.cloneNode(true))
  blendy.toggle("example")
})

7. Set up the transition to reverse (i.e., back to the button) when the user clicks outside the modal:

const modalTemplate = document.querySelector("#modal")
document.body.addEventListener("click", e => {
  if (e.target.classList.contains("modal__close")) {
    blendy.untoggle("example", () => {
      const modal = document.querySelector(".modal")
      if (modal) {
        modal.remove()
      }
    })
  }
})

8. You must add your own CSS styles for the trigger button and modal window. The library does not include styles.

.button {
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 200px;
  background: #0284c7;
  font-size: 14px;
  color: white;
  cursor: pointer;
}
.modal {
  position: fixed;
  top: 100px;
  width: calc(100% - 20px);
  max-width: 600px;
  background: white;
  border-radius: 10px;
  padding: 30px 30px;
}
.modal__header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.modal__title {
  margin: 0;
  color: #030712;
}
.modal__close {
  background-image: url(./close.svg);
  background-color: transparent;
  width: 14px;
  height: 14px;
  border: none;
  cursor: pointer;
}
.modal__content {
  color: #4b5563;
  font-size: 20px;
  text-align: center;
  text-wrap: pretty;
  padding: 30px 0 20px;
}
@media (max-width: 800px) {
  .modal__header {
    padding: 0;
  }
  .modal__content {
    padding: 10px 0 0;
  }
}

9. Check out the examples fold to find more examples on how to implement it on React, Vue, or Svelte apps.

How Blendy Works:

Blendy uses a combination of JavaScript and CSS transformations to achieve smooth transitions.

It calculates the initial and final states of elements, including their positions, sizes, and border radii. It then uses requestAnimationFrame to animate these properties over a specific duration using an easing function.

The library tracks all the source elements, manages toggle states, and applies the necessary transformations to achieve the animated transitions. Blendy uses the DOM API to calculate the position and size of elements, and applies CSS transform and border-radius properties to generate the visual effects.

When you initiate a toggle, the library determines the difference in position, size, and border-radius between the source and target elements. It uses the `j` function to control animation. The `j` function accepts a starting state, an ending state, and a callback function to apply the intermediate states.

The library also offers dynamic and spring animation options, each with different easing functions. The dynamic option has a cubic-bezier like ease-out effect, and the spring animation simulates the motion of a spring.

If you load new elements onto the page after initializing, the `update` method will re-sync to ensure transitions still work with the new elements.

The core of blendy relies on calculating and smoothly interpolating the CSS transforms (translate and scale) and border-radius properties of elements.