Setting paused timeline progress on pointermove or interval not working

[jramke]

Hey guys,

 

im trying to recreate this effect (https://codepen.io/ReGGae/live/povjKxV) but without threejs. I used svg clippath for this.
So i have a paused gsap.to() tween wich is animating to the clippath (eg. for the arch to left or to the right).
Now i want to animate the progress of this tween relative to the movement of the pointer. I also calculated a variable (relativeDistance) that returns this relative value from 0 to 1.

 

My expectation was to call 

animation.progress(relativeDistance);
// or 
gsap.to(animation, {duration: 0.1, progress: relativeDistance});

The problem now is when i want to set (or animate) the progress the animation doesnt stop. It seems like the progress is adding up with each interval.

To visualize that i created an interval at line 44. My expectation for this interval is that the progress is set to 0.01 at each interval and the clippath should not move.

 

I hope i made it understandable.

Thanks for your help 
 

See the Pen MWPbZgB by jramke (@jramke) on CodePen

[jramke]

SOLVED (see codepen)

 

it was because i always created a new tween.