Blendy: Framework-Agnostic Element Transitions for the Web

LinkTaha ShTool

Blendy is a lightweight JavaScript tool designed to smoothly animate transitions between different DOM elements with minimal code.

Key points

  1. Completely framework-agnostic, with provided examples for React, Vue, and Svelte.
  2. Connects source and target elements using data-blendy-from and data-blendy-to attributes.
  3. Requires content inside source and target elements to be wrapped in a single container element.
  4. Supports 'dynamic' (default) and 'spring' animation styles.
  5. Exposes toggle, untoggle (supporting a completion callback), and update methods for dynamic DOM manipulation.

Why it matters

Creating fluid morphing animations, such as expanding a card or button into a modal dialog, usually involves cumbersome layout calculations. Blendy delivers these effects declaratively without forcing developers into a specific framework ecosystem.

Analysis

By relying on simple data attributes and a minimal API, Blendy lowers the barrier for polished UI transitions. The design prioritises straightforward lifecycle handling via callbacks and updates, making it a practical option for common interactive patterns.

Found in

Summary generated by AI (Gemini 3.8 Flash, 6 October 2026). It may contain errors – the original source is authoritative.

Similar in content, found by the AI search.

  • Link:Jakub Antalik

    Transitions.dev: UI Transitions for Web Apps and AI Agents

    Transitions.dev is a curated library of user interface transitions for web applications. The collection includes standard UI components as well as interaction patterns tailored for AI interfaces, designed to be copied directly or utilized by coding agents via a skill.

    AI & LLMs· Resource

  • X post:Noah

    Five Micro-Interaction Libraries for the Web

    Noah (@noahelhadedy) shares a curated list of five lightweight frontend libraries designed for UI micro-interactions, covering theme switches, synthesized audio cues, element transitions, squircles, and page animations.

    631bookmarks18.6kviews

    Web development· Resource

  • Link:transition-kit.space

    Transition Kit: Templates for Page and Theme Transitions

    Transition Kit is a template library for page transitions and theme toggles on the web. Powered by the View Transitions API, it provides live previews, customizable timing and easing, and copyable code snippets.

    Web development· Tool

  • Link:Matt Perry

    Motion: Web Animation Library for React, JavaScript and Vue

    Motion (formerly Framer Motion) is an MIT-licensed, open-source animation library supporting React, JavaScript, and Vue. It uses a hybrid engine combining JavaScript with hardware-accelerated browser APIs such as ScrollTimeline. Its wider ecosystem includes pre-built sections in Motion UI, an AI Kit tailored for coding agents, and MotionScore performance audits.

    Web development· Tool

Let's talk about your project

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.