Anime: Responsive motion path animation example ?

[littlee]

the docs said

Motion path animations are responsive since v3

but the demo in the doc is still a non-responsive version, can someone show me a responsive one ?

[YuriFA]

@littlee https://codepen.io/spz/full/zbxqQW - this example with responsive motion path animation (with fix problem https://github.com/juliangarnier/anime/pull/541). The problem is function getParentSvgEl incorrect - it returns an invalid item (parent of svg element, but expected root SVG element

Now you can fix this problem with add viewBox attribute to parent of SVG element.

[mhammo]

You'll also have issues if the item you're animating is an SVGElement parented under the same SVG viewBox as your motion path element.

This is because the library attempts to scale the path's x and y at line 637-638 based on the viewBox:
[SVGPoint x] - [viewBox minimum x] * ( [SVG width] / [viewBox width] )

But the viewBox will handle the scaling itself if the animated item is under the same viewBox as your path element. So it gets scaled twice and goes a bit funky: https://codepen.io/anon/pen/EJKaxz

So that's something else to take into account if you're having issues getting the responsive motion path to work.

[merlox]

Hey bro people seem to ignore this issue so I created a fork and published the fixed version on npm it's called responsive-animejs and the only thing that's changed is the getParentSvgEl to make SVG path animations responsive.

[xeloader]

You'll also have issues if the item you're animating is an SVGElement parented under the same SVG viewBox as your motion path element.

This is because the library attempts to scale the path's x and y at line 637-638 based on the viewBox:
[SVGPoint x] - [viewBox minimum x] * ( [SVG width] / [viewBox width] )

But the viewBox will handle the scaling itself if the animated item is under the same viewBox as your path element. So it gets scaled twice and goes a bit funky: https://codepen.io/anon/pen/EJKaxz

So that's something else to take into account if you're having issues getting the responsive motion path to work.

I really need this to work. Did anyone get Elements under the same parent SVG to animate with motion paths? It works when the SVG isn't scaled, but when scaling to fit the window everything goes totally bonkers.

I tried responsive-animejs without any luck.

[xeloader]

Never mind. In case anyone else has problems with SVGs not following path inside of parent SVG. "Fixed" it by modifying lines 636 - 637 in anime.es.js. Removed svg.w and svg.h which yields

case 'x': return (p.x - svg.x);
case 'y': return (p.y - svg.y);

Thank you @mhammo for valuable information.

I only use animejs to animate svg elements inside of svgs.

[merlox]

That's interesting because I got it working without removing svg.w and svg.h by just using npm i -S responsive-animejs and importing that. Still, thanks for the information.

[juliangarnier]

Should be fixed in v3.1.0!

[benjibee]

Hey @juliangarnier You mention this being fixed in v3.1.0 but this issue is still open and I believe I'm having the same problem here which I've described here: #605

[SimTheFool]

I've the same issue with anime v3.1.0. responsive-animejs didn't solve the problem. I would like to try your fix @xeloader.

Never mind. In case anyone else has problems with SVGs not following path inside of parent SVG. "Fixed" it by modifying lines 636 - 637 in anime.es.js. Removed svg.w and svg.h which yields

case 'x': return (p.x - svg.x);
case 'y': return (p.y - svg.y);

Thank you @mhammo for valuable information.

I only use animejs to animate svg elements inside of svgs.

But what's the easiest and/or most elegant way to this ? I wanted to do something like that :

import anime from 'animejs;
anime.getPathProgress = myNewFunction

But getPathProgress doesn't seam to be accessible as an anime entrie. Is there a way to fix it without duplicating/forking the entire library ?

[qqbearqq]

case 'x': return p.x;
case 'y': return p.y;

[adriansuter]

The fix https://github.com/ruyuewang/anime/commit/a776810e7225b9e24f51ee2db8a6cbd24207d080 seems to work at least for the mentioned case. Do you, @juliangarnier, have any plans to put that into the official repo?

[jedrzejchalubek]

Tested out https://github.com/ruyuewang/anime/commit/a776810e7225b9e24f51ee2db8a6cbd24207d080 fix and I can confirm it fixes the problem in my case too.

It make more sense that scaling is handled by viewBox of SVG and the animated element is hold inside same SVG, so we do not have to think about it.