Animate SVG path d attribute

[Álvaro]

Animate Plus lets you animate HTML and SVG elements with any property that takes numeric values, including hexadecimal colors.

I assume this library can't be used to animate paths like the following?

        <path id="path" d="M0 0 L 300 0 L 300 300.4 L 0 300 Z" fill="#ccc"></path>

Unlike TweenLite or Anime.js?
https://jsfiddle.net/alvarotrigo/6yev2wc0/18/

$('button').click(function() {
    
    TweenLite.to('#path', 1, {
        attr:{d: 'M0 100 L 300 0 L 300 300.4 L 0 300 Z'}
    });
    
    TweenLite.to('#path', 1, {
        attr:{d: 'M50 50 L 300 0 L 300 300.4 L 0 300 Z'}
    }).delay(0.3);

   
});

[Benjamin De Cock]

Hi!

I assume this library can't be used to animate paths

It can, but unfortunately it only works in Chrome for now. Hopefully other browsers will catch up with their implementation of SVG2 soon!

In the meantime, an alternative to this is to animate the CSS clip-path property instead of an SVG shape. For simple examples like the one you just linked to, that's a perfectly acceptable way to do it. You can check out the following example to get an idea.

[Ray Villaraza]

Does Anime.JS really take in the "d" attribute pathing? I've not been successful with it. And am trying to avoid GreenSock since it's been pricey.

[Álvaro]

Does Anime.JS really take in the "d" attribute pathing? I've not been successful with it. And am trying to avoid GreenSock since it's been pricey.

Sure!

See this:

    var tl = anime.timeline({
      targets: '#path',
        duration: 500,
        direction: 'normal',
      duration: 500,
      easing: 'easeInOutQuad',
    });

    tl.add({
        d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z'),
    });
    

    tl.add({
        d: getPath('M6.3 7.1 L 96.3 4.8 L 93.7 94.3 L 8.5 92.2 Z'),
    }, '-=200');

[Ray Villaraza]

Thank you! That worked perfectly.

[pinoycamper]

Is this working with arc path?