Tracking values while animating

[sandbucks]

Hi all!

 

I feel like this should be a simple one so maybe I'm overlooking something obvious. Basically I have an animation using gsap.to(...), and I'm hoping to track the value/s I'm animating as they animate. I figured this would make sense to be done in the onUpdate() callback, but I'm goofily having trouble figuring out how to get the value (in this case, x) as it animates. 

 

tldr: if I animate my div's 'x' position from 0 to 150, is there a way to log/use the values in between those two numbers as they're reached during the animation?

 

I saw an older forum answer or two about a _gsTransform property that I can't seem to find, guessing it may be deprecated.

 

Thanks!

See the Pen wvNzWyp by Stuart-Mackinnon (@Stuart-Mackinnon) on CodePen

[mvaneijgen]

Hi @sandbucks welcome to the forum!

 

Is this what you're looking for? 

 

See the Pen jOdMrJX?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[sandbucks]

Hi @mvaneijgen - thanks for this! I'd come across the getProperty() function but felt like there must be a more streamlined way of accessing the property, like a this.x type of thing. But this works, thank you

[Rodrigo]

Hi,

 

There are a couple of reasons for not having a way like this.x to track the value of a property being tweened.

 

1. Performance. GSAP Tweens are mostly read-only. While you can update the values of certain properties, those are not a lot for a performance reason. A GSAP instance updates 60 times every seconds, which is the amount of times it updates the value being tweened. If you had to update the instance itself it would be super wasteful. Imagine have 100 tweens and you're tweening 4 different values on each. That's a lot of updates! On top of that you would have to include all the code to actually conduct that into the GSAP core.
2. Name collisions. Keep in mind that GSAP can tween the numeric value of any property of any JS object. A GSAP instance has, among other properties, a timeScale property, which you can actually tween! A GSAP instance is just a JS object and timeScale is a numeric value. So if you're updating the timeScale property that you are tweening you do this:

   this.timeScale = someValue;

   But which Time Scale is that, the target's or the parent Tween? See how this can get really messy really fast?

The getProperty() method is the best way we offer to do this and keep in mind that it basically means calling a simple method on an element which is super fast actually so there isn't a lot of downside, unless you are tracking literally thousands of elements at the same time, which honestly I never even tried, so checking the  of a couple of properties in a few elements shouldn't really cause any type of bottlenecks.

 

We're always thinking and trying different ways to improve GSAP which means keeping our eyes and ears open for suggestions, which we always are thankful for, because it shows an engaged community and users that are paramount to GSAP as their goto animation tool, which we love! But at the same time se are super careful about performance and adding extra KB in the tools for features that don't make a lot of sense or can be solved in a good way already

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Keep in mind that you can use .getProperty() to return a getter function by just not providing any property, and then you can reuse that as much as you want to get properties with very little code: 

See the Pen rNPjYpK?editors=0110 by GreenSock (@GreenSock) on CodePen

[sandbucks]

Thanks @Rodrigo for the in-depth explanation - makes a lot of sense to me now, and getProperty() has been working perfectly fine for me as @mvaneijgen suggested! Thanks @GreenSock also for the follow-up, that's a really nice simplification for my use case and I'm more than happy with that as a solution 🙂