Check if animated property was modified outside

[c64]

Hi! 

How could I check if tweened property was modifed outside by code or user interaction during the tween? 

There is scrollable div(s) on my page (actually price tables) with scrollLeft DOM property animated by TweenLite, but also scrollLeft is changed if user scrolls the div manually. I couldn't find a way to distinguish which of the following is the cause for scrollLeft change - tween processing or user interaction (each fires jquery event "scroll").

But I'd like to kill tween of the div if user starts scrolling so it stays under user control. 

 

Thank you..

[PointC]

Hi c64 

 

Welcome to the GreenSock forum.

 

I'm not sure I'm completely following your question, but it sounds like _gsTransform may be what you're looking for. From the docs:

• All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

https://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

If that doesn't solve the problem, could you please provide a simplified CodePen for us? More info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

[Carl]

I'm a little confused about what you are asking as well.

 

If you are using ScrollToPlugin there is an autoKill property that should kill the tween when a user scrolls.

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

 

Like, Craig mentioned, a simplified demo that clearly replicates the problem will really help us offer a solution.

[GreenSock]

Yep, I suspect you're looking for that autoKill feature that we've already got baked in to make your life easier. 

 

For the record, there's no way to know that a value is edited elsewhere other than what we do inside the plugin which is to record the value we set, and then next time we go to set a new value, we compare the previous one with the current one. If it's different, we know we didn't set it, so SOMETHING else did. 

 

In other words, if I set scrollTop to 100 and then on the next tick, I check scrollTop and it's 130, something else messed with it. 

 

Does that help at all?

[PointC]

After re-reading the question, I think you two are right. This sounds like an autoKill question.

 

I think I was confused by the first sentence about checking on a tweened property.   

 

I guess we'll wait and see if c64 has any more info for us.

[c64]

Hello, guys! Thanks for your answers.

 

Sorry for not being clear. But you got the idea, the autoKill property shoud do the the trick. I was not using ScrollTo plugin syntax, but created my tweens this way:

TweenLite.to(this, 0.42, {scrollLeft: lefts, ease: Power1.easeInOut}). I don't know if it makes any difference.

[c64]

For the record, there's no way to know that a value is edited elsewhere other than what we do inside the plugin which is to record the value we set, and then next time we go to set a new value, we compare the previous one with the current one. If it's different, we know we didn't set it, so SOMETHING else did. 

 

I wonder if that could be exposed via GSAP API so I could override set() function... onBeforeUpdate callback or something. I mean, what if GSAP engine would provide that callback with value that 'should' be set if Tween goes normally and user could modify that value and set it. 

 

I'm afraid of being unclear again, and probably should just read the sources and docs.

[Carl]

I think the ModifiersPlugin may help you. It allows you to intercept and modify the values the engine is planning on setting on each update of a tween.

From what I understand you could probably run your own logic in the modifier function to check for outside forces interfering.

 

Watch video and read: https://greensock.com/1-19-0/

[c64]

I think the ModifiersPlugin may help you. It allows you to intercept and modify the values the engine is planning on setting on each update of a tween.

From what I understand you could probably run your own logic in the modifier function to check for outside forces interfering.

 

Watch video and read: https://greensock.com/1-19-0/

Yes that's what I was looking for! Thanks!