Как зациклить весь объект с анимацией TweenMax?

Question

Worddoc @Worddoc

Frontend explorer

Как зациклить весь объект с анимацией TweenMax?

Всем привет. Есть функция shutterOff, в ней лежит функция с анимацией TweenMax. Я никак не могу разобраться, каким образом можно зациклить всю анимацию после выполнения всех таймлайнов. Вопрос жизни и смерти. Заранее спасибо!

function shutterOff () {
    var shutterWrapper = $('.shutter__wrapper');
    var ww = $(window).width();

    shutterWrapper.addClass('shutter__wrapper--off');

    function animation() {
      let tl = new TimelineMax();
      let $imgOne = $('.small_img img')[0];
      let $imgTwo = $('.small_img img')[1];
      let $imgThree = $('.small_img img')[2];
      let $imgFour = $('.small_img img')[3];

      let $rowOne = $('.row-1');
      let $rowTwo = $('.row-2');
      let $rowThree = $('.row-3');

      let $textLinesOne = $('.small_text_1 > span');
      let $textLinesTwo = $('.small_text_2 > span');
      let $textLinesThree = $('.small_text_3 > span');
      let $textLinesFour = $('.small_text_4 > span');

      let $colOne = $('.big .col-text-1')[0];
      let $colTwo = $('.big .col-text-2')[0];
      let $colThree = $('.big .col-text-3')[0];

      tl
      .addLabel('appearance')
// 0 — 1
      .to($imgOne,1.1,
      {
        x: '0',
        ease: Circ.easeOut
      },'appearance')

      .staggerTo($textLinesOne,1.1,{
        x: '0',
        ease: Circ.easeOut
      },.1,'appearance')

      .to($colOne,1.1,{
        top: '-100%',
        ease: Power1.easeOut
      },'appearance')
      .to($colTwo,1.3,{
        top: '-303%',
        ease: Power1.easeOut
      },'appearance')
      .to($colThree,1.65,{
        top: '-303%',
        ease: Power1.easeOut
      },'appearance')

      // 1 — 0(reverse)
      .addLabel('disappearance', '+=2')

      .to($imgOne,1.3,
      {
        x: '120%',
        ease: Expo.easeIn
      },'disappearance')

      .staggerTo($textLinesOne,1.3,{
        x: '-100%',
        ease: Expo.easeIn
      },.1,'disappearance')
      // 1 — 0(reverse)

      /// 1 — 2
      .addLabel('appearance1to2', '+=0')

      .to($imgTwo,1.1,{
        x: '0',
        ease: Circ.easeOut
      },'appearance1to2')

      .staggerTo($textLinesTwo,1.1,{
        x: '0',
        ease: Circ.easeOut
      },.28,'appearance1to2')

      .to($colOne,1.1,{
        top: '-302%',
        ease: Power1.easeOut
      },'appearance1to2')
      .to($colTwo,1.3,{
        top: '-711%',
        ease: Power1.easeOut
      },'appearance1to2')
      .to($colThree,1.5,{
        top: '-712%',
        ease: Power1.easeOut
      },'appearance1to2')
      /// 1 — 2

      // 2 — 0(reverse)
      .addLabel('disappearance2', '+=2')

      .to($imgTwo,1.3,
      {
        x: '120%',
        ease: Expo.easeIn
      },'disappearance2')

      .staggerTo($textLinesTwo,1.3,{
        x: '-100%',
        ease: Expo.easeIn
      },.1,'disappearance2')
      // 2 — 0(reverse)

      // 2 — 3
      .addLabel('appearance2to3', '+=0')

      .to($imgThree,1.1,{
        x: '0',
        ease: Circ.easeOut
      },'appearance2to3')

      .staggerTo($textLinesThree,1.1,{
        x: '0',
        ease: Circ.easeOut
      },.28,'appearance2to3')

      .to($colOne,1.1,{
        top: '-507%',
        ease: Power1.easeOut
      },'appearance2to3')
      .to($colTwo,1.3,{
        top: '-916%',
        ease: Power1.easeOut
      },'appearance2to3')
      .to($colThree,1.65,{
        top: '-1120%',
        ease: Power1.easeOut
      },'appearance2to3')
      // 2 — 3

      // 3 — 0(reverse)
      .addLabel('disappearance3', '+=2')

      .to($imgThree,1.3,
      {
        x: '120%',
        ease: Expo.easeIn
      },'disappearance3')

      .staggerTo($textLinesThree,1.3,{
        x: '-100%',
        ease: Expo.easeIn
      },.1,'disappearance3')
      // 3 — 0(reverse)

      // 3 — 4
      .addLabel('appearance3to4', '+=0')

      .to($imgFour,1.1,{
        x: '0',
        ease: Circ.easeOut
      },'appearance3to4')

      .staggerTo($textLinesFour,1.1,{
        x: '0',
        ease: Circ.easeOut
      },.28,'appearance3to4')

      .to($colOne,1.1,{
        top: '-712%',
        ease: Power1.easeOut
      },'appearance3to4')
      .to($colTwo,1.3,{
        top: '-1528%',
        ease: Power1.easeOut
      },'appearance3to4')
      .to($colThree,1.65,{
        top: '-1528%',
        ease: Power1.easeOut
      },'appearance3to4')


      // 4 — 0(reverse)
      .addLabel('disappearance4', '+=2')

      .to($imgFour,1.3,
      {
        x: '120%',
        ease: Expo.easeIn
      },'disappearance4')

      .staggerTo($textLinesFour,1.3,{
        x: '-100%',
        ease: Expo.easeIn
      },.1,'disappearance4')
      // 4 — 0(reverse)

      // 4 — 4.5
      .addLabel('appearance4to45', '-=.7')

      .to($colOne,.5,{
        top: '-810%',
        ease: Power3.easeIn
      },'appearance4to45')
      .to($colTwo,.5,{
        top: '-1625%',
        ease: Power3.easeIn
      },'appearance4to45')
      .to($colThree,.5,{
        top: '-1636%',
        ease: Power3.easeIn
      },'appearance4to45')
      // 4 — 4.5
    }


    videoPlay();
    setTimeout(animation,800);
  }