This is an example of how to use animo.js to implement a morphing animation.

As for what a morphing animation is, look at the figure below.

In short, smooth transitions between shapes. This is a great use for SVG, since SVG itself is shaped by lines drawn between various coordinates. The transformation from shape to shape is simply moving coordinate points.

It sounds simple, but it’s actually a bit complicated to implement. Today we are going to use animo.js, the js library mentioned many times before, to animate morphing.

For the basics of animo.js, check out this previous post.

Animo.js provides a timeline management feature that is essential for animation, making it easy to control and manage animation playback.

You can check out the documents on the official website, Timeline.

Here’s what you want to achieve:

Using animo.js is quite simple to implement, requiring only two shapes of SVG.

Looking at the effect, you can see that the effect is mainly the transformation between shapes, as well as the color change.

First, the default display of the letter F, the structure is as follows:

<h2>SVG morph in HTML, CSS & JS</h2> <p>Powered by <a href="http://anime-js.com/" target="_blank">anime-js</a></p> <svg class="social" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <path class="path" style="fill:#3b5998; fill-rule:evenodd; stroke:#3b5998; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; Stoke-opacity :1" d="m 41.416254,90 c-0.327378,-7.4702 0.20833,-32.7284 0, -39.901-5.386902, -0.2083-4.521603,0.3274 -9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356, -3.53554-0.04417, 5.73754-0.03936,9.37986, 12.87945-5.049924,0.46388 -7.309188, -0.33689-10.85914, 1.26269-1.403378, 3.17794-1.569601, 4.80531-1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907, 0-0.995158, 6.00899-0.948285, 7.62376-1.767767, 13.06882-3.676625, 0.088-5.605721,-0.1488 -11.111678, 0-0.148814,6.756 0.357147,33.0107, 40.1536-6.428576, 0.1786-8.174438, -0.03-14.394674,0 z" /> </ SVG >Copy the code

The next step is to use animo.js for the morphing animations.

First declare a timeline:

var socialTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
Copy the code

The middle parameters are also very easy to understand, automatic loop back and forth playback effect.

Here’s how the animation works, showing the shape changing from the letter F to the Twitter logo.

The code is as follows:

socialTimeline .add({ targets: '.path', d: { value: ["m 41.416254,90 c-0.327378,-7.4702 0.20833,-32.7284 0, -39.901-5.386902, -0.2083-4.521603, 0.3274-9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 -0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356, -3.53554-0.04417, 5.73754-0.03936,9.37986, 12.87945-5.049924, 0.46388-7.309188,-0.33689 -10.85914, 1.26269-1.403378, 3.17794-1.569601, 4.80531-1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907,0 -0.995158, 6.00899-0.948285, 7.62376-1.767767, 13.06882-3.676625, 0.088-5.605721, -0.1488-11.111678, 0-0.148814,6.756 0.357147,33.0107, 40.1536-6.428576, 0.1786-8.174438, -0.03-14.394674,0 z", "M 10.44335, 90c 11.073313,0.3952 19.483106,-1.8358 23.901837, -7.1603-7.9736, -1.4292-11.832311,-4.1933 -15.078321,-11.0837 3.459698,0.8219 5.795894,0.6358 7.606781, -0.607-7.19593, -1.719-12.734543,-6.7971 -13.741664,-15.836 2.766355,1.55307 5.466848,2.66623 7.828682,2.0203 -4.336544, -2.92911-9.838998,-10.47636 -5.555839,-22.47589 8.400675,11.87052 23.824269,17.67568 33.840111,17.67767 -0.936406,-9.74688 5.88057,-19.46521 15.302849,-19.97853 8.13118,-0.50719 10.57457,4.01944 12.476346,4.82624 3.644547,0.13419 7.393301,-1.74401 10.354063, -3.53553-1.380842, 4.47157-5.06769, 5.62903-6.313453,8.58629 5.42317,0.41513 5.891376,-1.53111 8.333758, -2.0203-2.071414, 3.75017-5.393863, 5.00034-7.323606, 8.08122-1.633654, 16.12573-5.16049,27.57123 -14.647212, 36.36553-13.825764, 11.3764-34.755458, 17.369-56.984332, 5.14z "], duration: 700, delay: 200, easing: 'easeInOutQuart' },Copy the code

I’m going to select the path element, and then I’m going to select the property that I want to change, in this case the value of the path that I want to change the d property, and I’m just going to write the value of the shape that I want to change. Then the animation parameters such as animation time, delay and animation curve are adjusted to make the animation more natural.

It’s easy to change the fill and border color of the path shape.

For example, change the fill color:

 fill: {
      value: ['#3b5998', '#4099ff'],
      duration: 700,
      delay: 200,
      easing: 'easeInOutQuart'
    },
Copy the code

The value of the color here is an array. When executed, animos.js automatically reads the values of the colors in the array and fills them in the path, thus animating the colors of the two shapes.

The demo address

As you can see from the simple animation above, animating SVG using animo.js is also very convenient and mainly lightweight.