What is the best way to transform one svg into a different svg using Anime.js?

I'm facing an issue where two of my SVGs have the same number of points, but when I try to play the animation, they seem to be too close together. The animation suddenly jumps and creates a weird shape before transitioning from the first SVG to the second one.

I created these SVGs in Adobe XD. Here is the code snippet:

<svg id="morph" viewBox="0 0 1920 540">
   <path class="morph" d="m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"/>
</svg>

 <script>
            var overlay = document.getElementById('morph');

            var morphing = anime({
                targets: '.morph',
                d: [
                    {value : "m864.216 135.95 36.39 41.917S780.519 307.11 1078.914 373.479s221.979-87.327 221.979-87.327l32.75-34.931s25.473 101.3 207.422 34.931 440.314 150.2 411.2 380.744S34.528 576.079 34.528 576.079s-3.64-429.647 342.063-509.987 272.923 174.653 487.623 69.861"},
                    {value: "M2.49 576.483S20.535 398.736 122.472 239.61s236.674-199.127 302-217.883c176.407-41.244 334 45.685 334 45.685l340 233.7s172 105.427 280 119.484 322 12.3 322 12.3 118 5.271 160 61.5 56 89.613 62 117.727S2.49 576.483 2.49 576.483Z"},
                ],
                duration: 1200,
                loop: false,
                easing: 'easeInOutQuint'
            })
        </script>
htmlcsssvganime.jssvg-morphing

Answer №1

Your paths need some optimizations to ensure full compatibility for interpolation.

While many animation libraries attempt to make paths compatible, such as converting them to polygons using tools like flubber.js, manual adjustments often yield the best results.

A table detailing steps:

...
step 1 step 2
m 864.216 135.95 M 2.49 576.483

Note: Command types must also be compatible. For example, missing commands or differing command order can affect the interpolation process.

Normalize Path Data

To simplify adjustments, consider normalizing path data to a reduced set of commands (M, C, L, Z). Tools like Jarek Foksa's getPathData polyfill may assist in this process.

path.getPathData({normalize: true});

The use of absolute coordinates is recommended for better consistency.

Convert Line Commands

You can convert Line commands (L) to Cubic Bezier commands (C) by repeating the x/y coordinates within the command.

L 901 178

becomes:

C 901 178 901 178 901 178

Adjust Starting Points

Ensure starting points are positioned appropriately to avoid unexpected transitions during interpolation.

Editing the starting point (M) becomes easier with normalized and absolute commands.

...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to apply CSS to style my <div> element

I've run into a snag with my coding project, specifically when attempting to style my div. Here is the code I have so far: All CSS rules are applying correctly except for the .chat rule. Can someone help me figure out what I'm doing wrong? var ...

javascriptjqueryhtmlcss

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

Display the subsequent fieldset using the following button

Currently working on developing a webpage that involves dynamic data utilizing the fieldset element. Despite implementing a function to display the next fieldset upon clicking the Next button, I am facing an issue where it is not functioning as expected. T ...

javascripthtmljquerybootstrap-4fieldset

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

The thumbnail of the embedded YouTube video appears pixelated and unclear

I've integrated the most recent video from a YouTube channel onto my website. However, the thumbnail of the video is appearing very blurry/low quality. Is there a way to ensure a high-quality thumbnail is displayed? You can see a live demonstration h ...

jqueryhtmlcssyoutubeembed

Customize GridView Appearance in ASP.NET

After using the examples provided at this link, I was able to get everything working smoothly. However, the issue I'm facing now is with the style of the GridView. When the gridview first loads, it looks perfect. But when I click on the Edit button, t ...

cssasp.netgridviewstyles

The onBlur attribute does not seem to be functioning properly under a specific condition

I've been attempting to customize the appearance of a search box using the onFocus and onBlur attributes, but unfortunately I haven't been able to achieve the desired outcome. Below is my HTML code: <form action="index.php" method="post" clas ...

javascripthtmlsearchonbluronfocus

What's the reason the background is missing from the entire section?

I am trying to understand why the grey background is not appearing throughout the entire section. I have everything enclosed within the element with the ID of "mid-section". Even though the CSS specifies a grey color for the "mid-section" background, it do ...

htmlcssbootstrap-4frontendweb-frontend

HTML parsing with HTMLAgilityPack can sometimes be tricky, as the SelectNodes

I've heard great things about the HTMLAgilityPack library and decided to give it a shot, but I have been struggling to make it work for months now. No matter what I do, all my attempts seem to result in null. Following tutorials like this one () doesn ...

c#html.nethtml-agility-pack

Arranging squares in a circular formation with Three.js

I am facing an issue with aligning squares within a circular grid to its center. Despite the correct center point, the entire grid is consistently skewed to the right. The problem could be due to incorrect calculations for removing squares outside the cir ...

javascripthtmlthree.js

Learn how to perform a post request in node js without triggering a page redirect or refreshing the form, all without using the preventdefault method

Is it possible to prevent the page from refreshing after sending data through an HTML form hitting a specific endpoint? I'm unsure about the best solution as there is no prevent default in nodejs, and I don't want the same page to redirect or re ...

javascripthtmlnode.jsexpress

When scrolling a semi-parallax effect in a resized window, I notice a calming presence of empty white

I recently acquired a WordPress website from its previous owner, and I'm encountering an issue with the parallax section at the top. It seems to be scrolling at a slightly slower pace than the rest of the page. I've tried adjusting the width and ...

jqueryhtmlcsswordpress

Using Regex named groups in JavaScript's replace() method

Currently in my JS project, I am facing a challenge while trying to create an object using the code snippet below. My difficulty lies in extracting regex named groups using the replace function provided. var formatters = { 'p': 'padding& ...

javascriptphpcssarraysregex

Phonegap (cordova 1.6.0) integration with Facebook login is experiencing issues on Android

When using Cordova 1.6.0, I am encountering issues with alerts. The Cordova Facebook Connect plugin is failing on login! The Cordova Facebook Connect plugin is also failing on auth.status! Please assist me with resolving these problems. I have been fol ...

jqueryandroidhtmlcordova

Are the maps intersecting within the field of vision?

I have 2 components in my angular application each showing a map from mapbox. Here is the code for one of the components: Component import { Component, OnInit } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; @Component( ...

cssangularmapboxmapbox-gl

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

htmlcsscss-shapes

Legend click functionality works well in hiding the bars, but unfortunately, the data values in the charts.js are not being concealed as expected

When I click on the legend, the bar is hidden in the charts.js bar chart. However, the data value associated with the bar is not hidden. I have provided a link to the JS Fiddle code below: Check out the JS Fiddle here: https://jsfiddle.net/npyvw1L8/ var ...

javascripthtmlchart.js

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a ...

jqueryhtmlcssweb

Styling radio buttons with Bootstrap causes them to lose their checked state appearance

Using a standard set of radio buttons within Bootstrap works perfectly with no additional styling: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ ...

cssbootstrap-4

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

cssangulartypescriptionic-frameworkionic3