How to get prop value in timeline onUpdate() callback?

[mrz]

Hello,

 

Ive got a timeline that animates the position of an element using left and Ive attached the onUpdate callback which triggers fine.

 

My question is how can I check the current prop value at the point of the callback, e.g. if I am animating from left:100 to left:200 and the onUpdate() is triggered 10 times, I would like to be able to see 110, 120, etc..

 

I have done a search on the forums and come across a variable assigned to the element (_gsTransform) but it doesnt have the value I am looking for (left). I have quickly gone through the timeline object but couldnt find what I was looking for.

 

I am currently working around the issue by calling getBoundingClientRect() on the element to get its current position. However I believe this causes a reflow and I want to avoid this, especially during an animation.

 

I have made a codepen example that shows it working when I use x rather than left. But this issue remains with other props like top, left, alpha, etc

See the Pen QEvRNw?editors=1111 by anon (@anon) on CodePen

[OSUblake]

I am currently working around the issue by calling getBoundingClientRect() on the element to get its current position. However I believe this causes a reflow and I want to avoid this, especially during an animation.

 

Using left does the same thing. That's why using x is better. If you need to use  left, you can get it's value from your element's style.

See the Pen BzRZQg?editors=0011 by osublake (@osublake) on CodePen