Callback for end of tween, before repeatDelay?

[elegantseagulls]

Is there a callback for when a tween ends but before it repeats?

 

See the Pen RwWQKrM?editors=1111 by elegantseagulls (@elegantseagulls) on CodePen

See the Pen RwWQKrM by elegantseagulls (@elegantseagulls) on CodePen

[OSUblake]

A timeline?

 

gsap.timeline({
    repeat: -1,
    repeatDelay: 3,
    onRepeat: () => console.log("REPEAT")
  })
  .to('div', { 
    ease: 'none', 
    duration: 3, 
    x: 600, 
    visibility: 'visible', 
    onComplete: () => console.log("COMPLETE")
  })

 

[elegantseagulls]

7 minutes ago, OSUblake said:

A timeline?

Unfortunately not. Ideally inside a stagger (commented out in the codepen).

[PointC]

I'd go with a timeline as Blake suggested.

 

You could also remove the infinite repeat and use a gsap.delayedCall() in the onComplete to restart the tween. Just a thought.

[OSUblake]

Then create your own stagger.

 

gsap.utils.toArray("div").forEach((el, i) => {
  
  gsap.timeline({
    delay: i * 1,
    repeat: -1,
    repeatDelay: 3
  })
  .to(el, {
    duration: 3,
    x: 600,
    visibility: 'visible', 
    onComplete: () => console.log("COMPLETE")
  })  
})

 

[OSUblake]

Can also be done using the distribute util if you need more advanced staggering.

 

const delay = gsap.utils.distribute({
  each: 1
});

gsap.utils.toArray("div").forEach((el, i, divs) => {
    
  gsap.timeline({
    delay: delay(i, el, divs),
    repeat: -1,
    repeatDelay: 3
  })
  .to(el, {
    ease: "none",
    duration: 3,
    x: 600,
    visibility: 'visible', 
    onComplete: () => console.log("COMPLETE")
  })  
})