On second loop - don't do the last animation

[Devotee007]

let restartCount = 0;
const maxLoop = 1;

const tl = gsap.timeline({ id: 'main_tl' });

  function restartTl() {
    if (restartCount < maxLoop) {
      restartCount++;
      tl.play('intro');
    } else {
      tl.kill(null);
      tl.clear();
    }
  }

    tl.add(tlCounter.play(), '+=0');
    tl.add('intro');
    tl.to([txt, counter, legal], {
      scale: 0,
      transformOrigin: '50% 50%',
      duration: .4,
      ease: 'power2.out',
    }, '>+3');
    tl.to([txt, counter, legal], {
      autoAlpha: 0,
      duration: .3,
      ease: 'power2.out',
    }, '<');

    tl.set(cta_btn, { autoAlpha: 1, scale: .5 }, '>+.05');
    tl.to(cta_btn, { scale: 1, duration: .4, ease: 'back.out' }, '>');
    tl.add(tlCta.play(), '<');
    tl.to(cta_btn, { scale: 0, duration: .4, ease: 'back.in' }, '>+2');
    tl.to(cta_btn, { autoAlpha: 0, duration: .3, ease: 'power2.out' }, '<+.3');
    tl.to([txt, counter, legal], {
      autoAlpha: 1, scale: 1, duration: .4, ease: 'power2.out',
    }, '<');

    tl.eventCallback('onComplete', restartTl);

I have this loop, that runs twice. On the second and last loop I don't want to run the last 3 rows and I don't want to run the onComplete. I want a stop.    I have done this before, but I can't figure it out this time. Any tips? 

[Devotee007]

const tl = gsap.timeline({ id: 'main_tl' });

  function restartTl() {
    if (restartCount < maxLoop) {
      restartCount++;
      tl.play('intro');
    } else {
      tl.stop('pauseLabel');
    }
  }

  if (execution.dimensions === '320x50') {
    tl.add(tlCounter.play(), '+=0');
    tl.add('intro');
    tl.to([txt, counter, legal], {
      scale: 0,
      transformOrigin: '50% 50%',
      duration: .4,
      ease: 'power2.out',
    }, '>+3');
    tl.to([txt, counter, legal], {
      autoAlpha: 0,
      duration: .3,
      ease: 'power2.out',
    }, '<');

    tl.set(cta_btn, { autoAlpha: 1, scale: .5 }, '>+.05');
    tl.to(cta_btn, { scale: 1, duration: .4, ease: 'back.out' }, '>');
    tl.add(tlCta.play(), '<');
    tl.add('pauseLabel');
    tl.to(cta_btn, { scale: 0, duration: .4, ease: 'back.in' }, '>+2');
    tl.to(cta_btn, { autoAlpha: 0, duration: .3, ease: 'power2.out' }, '<+.3');
    tl.to([txt, counter, legal], {
      autoAlpha: 1, scale: 1, duration: .4, ease: 'power2.out',
    }, '<');

    tl.eventCallback('onComplete', restartTl);

  }

I have now tried this, but it doesn't stop at the pauseLable, it continues to the end and then jump back and stops at pauseLable.

[GreenSock]

There's no such thing as "stop()" on a tween/timeline. Did you mean pause()? 

 

It seems like a strange way to engineer things - if you want it to repeat an animation twice, why not just wrap it in a timeline that has repeat: 1? And why are you embedding part of the animation that you don't want to repeat into the timeline? Why not either treat that as an independent animation, and fire off the repeating one in an onComplete? Or sequence them in a master timeline? Sorta like: 

 

let intro = gsap.timeline();
intro.to(...);
         
let repeatedTL = gsap.timeline({ repeat: 1 }); // play twice
repeatedTL.to(...).to(...).to(...);
                              
let master = gsap.timeline();
master.add(intro)
      .add(repeatedTL);