easing / duration on timeline progress function

[LPIP]

Hi , 

 

I am creating an interactive image gallery with image zoom  functionality depending on mouse proximity to image. I have created a timeline for each image and using the progress function to update the image scale on mousemove. There is also a tween on the container which moves the container around. The duration for all animations is 1s , so the easing on the container tween is smooth and takes 1s to update but the progress function is tied directly to the mouse position so there is no easing and the image scale animation is not smooth . my question is how can I add the 1s easing / duration on the timeline progress function so that the image scale animation has the same easing / duration as the container animation. Does that make sense ? cheers from CHRIS

 

https://codepen.io/chrispetro/pen/rNyWRrR

 

 

See the Pen rNyWRrR by chrispetro (@chrispetro) on CodePen

[OSUblake]

Maybe you can learn from this pen. 

 

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

 

It's a simple pattern that works great with changing stuff like with the mouse. And yes, you can do the same thing to progress or whatever value you want.

 

An older pen using the old syntax, but using the same concept.

 

See the Pen BLOoOP by osublake (@osublake) on CodePen