leet-ice

Technically on mouse down it should keep tweening toward 100%. On release it continues to 0%. I'm not sure .progress() is solution due to this.

Kinda seems like I should just build my own interval and handle it without tweens..

Wanting to animate a meter, similar to one in Fishing Clash, attached below at ~1:06..

Basically meter starts dropping to 0%, pressing a button has it go to 100% slowly.  If it goes to 0, fish gets away. If meter goes to 100%, your line breaks.

Seems like function-based values would help figure out new 'x' to go to onmousedown, but is that the best way to handle a dynamic 'x' to tween to? Calling invalidate seems to make it glitch/jumpy..   Would be nice if instead the dynamic function was called every single frame? But that's probably innefecient.  https://greensock.com/function-based/

Other thing would be is adding in randomization, like every few seconds, maybe the fish starts pulling harder, and meter is going faster to 0%? or it's swimming towards you and you don't need to reel in as fast?  

Carl, this solution will flash from frame to frame, if it's running on a bogged down device.. it's like there's a fraction of a second, where the last image is hidden, and the new one is being displayed.. 😕  It doesn't happen at the same second..

I ended up just making my own simple javascript function that changes the div id, which are all set with different background-image's... much more smooth, as there's not that brief second of one div being hidden, and another being shown.

I've tried all mentioned ideas... what ended up working was increasing the rotation.. if the animation is changing x,y,opacity,scale too slowly (ie too few pixels per second), rotation: 0.01 isn't enough.

I instead just set the rotation with CSS to .01deg, and it's completely smooth now for all animations.

transform: rotate3d(1, 1, 1, .01deg);