Animate element's width with quickTo on mousemove()

[cajpoj]

Hi!

 

I'm trying to animate the width of a div based on a user's cursor position with a mousemove function  and GSAP's quickTo for performance's sake and smooth movement. As you can see in the pen, it is totally broken and sends some strange value on inspect to the box I want to animate. 

 

It works if I just use a clientX value (as commented out at the end of my function) and updating as a pixel value, but for my end goal I need % values to update the width of my div in my quickTo function. The variables I'm setting seem to be the proper values when I log them in the console, so I'm not sure what I'm missing here or how to properly pass a % value into my quickTo function

See the Pen abxOLGe?editors=1111 by cajpoj (@cajpoj) on CodePen

[GreenSock]

Yeah, quickTo() doesn't have conveniences like unit conversion, and you're trying to do a percentage-based thing here but you can sorta hack that like this: 

See the Pen RwOPxdb by GreenSock (@GreenSock) on CodePen

 

Internally, a gsap.quickTo() is just a convenient way to access a tween's .resetTo() functionality. So I forced the percent unit into the paused tween. The key is that gsap.quickTo() and tween.resetTo() are ways to feed a raw number directly into the slot inside the already-created tween that's animating that value. Again, it's highly optimized, hence skipping the conveniences like unit conversion, property aliases, etc. 

 

Does that give you what you were looking for? 

[cajpoj]

Awesome, that works great. Thank you!