15 Morph Animation Javascript Libraries

Morphing animation is not a arduous task as myriad of JavaScript libraries are available to work with it. For this roundup we have collected 15 Morph Animation Javascript Libraries that will help designers and developers to easily create innovative and visually stunning motions for web design projects.

BLOB

BLOB - Interactive Animated 3D Background

This is animated, interactive and highly customizable 3D background. Visual editor included. Supports morphing and other shape transitions. Created as Javascript plugin based on HTML5 Canvas.

Source

Anime.js

Anime.js

It is easy to create smooth animations with couple of lines of JavaScript using Anime.js. There are so many other features packed into Anime.js such as timelines, keyframes and SVG morphing animations

Source

Flubber

flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

Source

Animate Plus

Animate Plus

Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile.

Source

SVG Morpheus

SVG Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.

Source

React Morph

React Morph

Morphing UI transitions made simple.

Source

AsciiMorph

AsciiMorph

It is a small stand alone javascript library for rendering ascii art and creations into elements, allowing for them to be changed out with a morphing transition.

Source

Morpheus

Morpheus

It lets you “tween anything” in parallel on multiple elements; from colors to integers of any unit, with easing transitions and bezier curves, including CSS3 transforms – all in a single high-performant loop utilizing the CPU-friendly requestAnimationFrame standard.

Source

Blotter.js

Blotter.js

It provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.

Source

Ramjet

Ramjet

Morph DOM elements from one state to another with smooth animations and transitions.

Source

KUTE.js

KUTE.js

This is a native JavaScript animation engine featuring great code quality, badass performance, SVG morphing, stroke drawing and 2D & 3D transforms, CSS3 transforms, colors, as well as other CSS3 properties or presentation attributes.

Source

ngMorph

ngMorph

This module is an attempt at packaging transitions/animations into directives that enable the reuse of elements by morphing them into other elements.

Source

Morphy Buttons

Morphy Buttons - jQuery any Content Morpher

Morphy buttons is a premium multi-purpose jQuery library for smart, fast, modern and comfortable showing of additional content, video and pictures. It is the best library to show your visitor the relative content without leaving current page.

Source

Polymorph

Polymorph

At about 6k minified and 3k gzipped, it is one of the smallest fully featured path morphing libraries available.

Source

MorpherJS

MorpherJS

It is an JavaScript image morphing library. It uses HTML 5 canvas element.

Source

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.