Anime.js SVG Morph Animation Breaks Shape Path

Question

I'm trying to morph an SVG of a circle (converted to a path in Illustrator using Object > Compound Path > Make) into an square (converted the same way) using Anime.js but when the timeline runs, the circle shape is distorted as if the path is not being interpreted properly.

The square shape looks fine though.

As a test, you can remove the target class of shape from the SVG in the markup to prevent Anime.js from running and the circle will appear correctly.

Why is Anime.js unable to read my circle?

const circlePath = 'M153.1,49.5c63.2,0,114.5,51.3,114.5,114.5s-51.3,114.5-114.5,114.5S38.6,227.2,38.6,164S89.9,49.5,153.1,49.5z';
const squarePath = 'M270.7,275.7H23.9V31h246.8V275.7z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".shape",
  d: {
    value: [
      circlePath,
      squarePath
    ],
    duration: 1500,
    easing: "easeInOutQuad"
  },
  offset: 1500
});

svg {
  margin: 1rem;
  border: 2px solid #666;
}

Alexandr_TT · Accepted Answer

To perform smooth morphing from one shape to another, several conditions must be met

The number of nodal points in the initial figure and the final figure must be the same
The same nodal points from the beginning of the path should have the same shape. (C, Q, T, S for bezier curves)

You can get paths that meet these requirements using any vector editor.
Let's say you want to realize smooth morphing a circle into a rectangle

Draw a circle in the vector editor

Add four more points along the diagonals, they will be needed to shift the contour of the circle into a square

Save the file in * .svg format and copy the path to another file. This will be the initial figure for morphing. Next, drag these four anchor points to the corners of the square and adjust the control points of the anchor points (blue arrows in the figure)

Save the file again in the vector editor and copy the second path it will be the final morph figure

Substitute path for the initial and final elements in your application:

const circlePath = 'm268.3 164.3c0 31.4-12.6 59.9-33 80.7-20.9 21.2-49.9 34.4-82 34.4-31.5 0-60.1-12.7-80.9-33.3-21.1-20.9-34.1-49.8-34.1-81.8 0-31.1 12.3-59.3 32.4-80 20.9-21.6 50.2-35.1 82.7-35.1 32.3 0 61.6 13.3 82.5 34.8 20.2 20.7 32.6 49 32.6 80.2z';
const squarePath = 'm268.3 164.3c0 31.4 0 86.7 0 115.1-26.6 0-82.9 0-115.1 0-31.5 0-73.4 0-114.2 0-0.9-26.3-0.9-83.1-0.9-115.1 0-31.1 0-87 0-115.1 26 0 82.6 0 115.1 0 32.3 0 91.9 0 115.1 0.9 0 30.9 0 83 0 114.2z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".shape",
  d: {
    value: [
      circlePath,
      squarePath
    ],
    duration: 1500,
    easing: "easeInOutQuad"
  },
  offset: 500
});

svg {
  margin: 1rem;
  border: 2px solid #666;
}

The most difficult thing was to get the correct path formulas. Having them, you can implement morphing without using Javascript using pure SVG

Reverse movement

Smooth morphing animation can also be done with SnapJS

var svg = document.getElementById("svg1");
var s = Snap(svg);

var simpleCup = Snap.select('#coffee-cup');
var fancyCup = Snap.select('#fancy-cup');

var simpleCupPoints = simpleCup.node.getAttribute('d');
var fancyCupPoints = fancyCup.node.getAttribute('d');


var toFancy = function(){
  simpleCup.animate({ d: fancyCupPoints }, 1000, mina.backout, toSimple);  
}

var toSimple = function(){
  simpleCup.animate({ d: simpleCupPoints }, 1000, mina.backout, toFancy); 
}


toSimple();

Anime.js SVG Morph Animation Breaks Shape Path

Answers (1)

Related Questions