How to loop entire object with TweenMax animation?

Question

PHP

Hello. There is a shutterOff function, it contains a function with TweenMax animation. I can not figure out how to loop the entire animation after all the timelines have been completed. A matter of life and death. Thanks in advance!

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);
  }

Answer 1

Using the uasort function

$array = [
[
    'id' => 123456
    'name' => 'name'
    'is_closed' => 0
    'members_count' => 3583
    'photo_200' => 'photo url'
]];
uasort($array, function($a, $b) {
    return ($a['members_count'] <=> $b['members_count']);
})

BUT if you take it from the database, it will be easier to add orderBy when requesting

Answer 2

usort

Answer 3

php.net/manual/ru/function.ksort.php first user note

Answer 4

you need to reindex it by members_count, and then sort it

function reIndex($arr,$key){
    $result = [];
    foreach($arr as $one){
        $result[$one[$key]][] = $one;
    }
    return $result;
}

$ar = reIndex($myArray['response'],'members_count');
ksort($ar);
print_r($ar);

Answer 5

I see only one timeline, in order to loop it, it is enough to pass options with the repeat property: -1
let tl = new TimelineMax({ repeat: -1 });