Animates an element relative to the x, y and angle values of an SVG path element.
var myPath = anime.path('svg path');
The path function returns a new Function that returns the specified property.
Note : Motion path animations are responsive since v3
| Parameters |
Example |
Info |
'x' |
myPath('x') |
Return the current x value in 'px' of the SVG path |
'y' |
myPath('y') |
Return the current y value in 'px' of the SVG path |
'angle' |
myPath('angle') |
Return the current angle value in 'degrees' of the SVG path |
Example :
var path = anime.path('.motion-path-demo path');
anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
