I see that using the "repeat:-1" in timeline is breaking the draggable behavior ease flow or triggering timeline start.

[kkrish 0 Likes (Newbie)]

I see that using the "repeat:-1" in timeline is breaking the draggable behavior ease flow. 

See the Pen WNedayo?editors=1111 by GreenSock (@GreenSock) on CodePen

If use "repeat:-1" to loop the animation in above code pen code. observe that drag ease is breaking (I guess it triggering timeline start on drag .?).

.to("#Handle", {
  duration: 100,
  x: 1000,
  repeat:-1,
  ease: "none"
});

 

See the Pen XWaadab by kkmail (@kkmail) on CodePen

[OSUblake 18,538 Likes (Superhero)]

Welcome to the forums @kkrish

 

Progress isn't going to be the same in that case because it's essentially an infinite number animations stacked together. In your case, the animation would have a duration of  10000000000. So if you're scrubbing to a progress of 1, it's going to blow past all the all the previous repeat animations.

 

If you really need that infinite repeat, it might be better to use time instead. 100 is of course the duration of your animation without all the repeats.

handle.t1.time(this.x/line.getBoundingClientRect().width * 100);

 

[_Greg _ 128 Likes (Specialist)]

Hi! 

Try this:

handle.t1 = gsap.timeline({
  repeat:-1,
  onStart() {
    console.log('start');
  },
  onComplete() {
    console.log('complete');
  }
})
.to("#Handle", {
  duration: 100,
  x: 1000,
  ease: "none"
});