juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

get continues position (x,y) from moving SVG object #855

Open bartatgithub opened 1 year ago

bartatgithub commented 1 year ago

Is your feature request related to a problem? Please describe. The problem is that I cannot find anywhere in the documentation how to obtain continuous position (x,y) of a moving object. And to further use this position (x,y) in another Javascript. So I assume this is not (yet) implemented in Anime.js.

Describe the solution you'd like A way to continuously obtain the position (x,y) of a moving object and a way to use this in another Javascript. For now to be used specifically in the SVG Motion path example of yours but would be useful in different projects using Anime.js.

Describe alternatives you've considered Tried using basic Javascript to obtain the position of the animated div but doesn't work so far.

Thanks to help me out on this!

manake commented 1 year ago

Why basic JavaScript to obtain position doesn't work? It should work.

Please post a code example.

// jQuery:
let positionLeft = $('.box').css('left');

// Plain JavaScript:
let box = document.querySelector('.box').getBoundingClientRect();

You can also animate plain object with anime.js and in update() set CSS.

bartatgithub commented 1 year ago

Hello

Sorry for late reply, meanwhile I had already obtained what I urgently needed with 'vector.js'.

Will definitely try your suggestion here one of these days.

Strange though that this should be done via a 'document.querySelector' on the element? Shouldn't it be directly readable via a function that reads the position via your library?

Thanks!