[Why onRepeat function in tweenMax works only once?]

I have the same problem with Angular2 version 2.1.0 and gsap 1.19.0

 

changePhoto() is call once.

 

fusee.component.ts code is here :

import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from 'angularfire2';



@Component({
  selector: 'app-fusee',
  templateUrl: './fusee.component.html',
  styleUrls: ['./fusee.component.css']
})
export class FuseeComponent implements OnInit {

  photoUrl: string;

  photoIndice = 0;
  fb: any;
  tl: any; // = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto() });

  constructor( @Inject(FirebaseApp) firebaseApp: any) {

    this.fb = firebaseApp;
    this.tl = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto() });

  }

  ngOnInit() {
    this.tl.from('.cloud', 1, { alpha: 0 })
      .to('.rocket-wrapper-2', 3, { y: -400, ease: Expo.easeIn })
      .to('.cloud', 3, { attr: { cy: 185 }, ease: Expo.easeIn }, '-=3')
      .set('.cloud', { clearProps: 'all' })
      .set('.rocket-wrapper-2', { y: 450 })
      .to('.rocket-wrapper-2', 4, { y: 0, ease: Elastic.easeOut.config(0.5, 0.4) })
      .to('.trail-wrapper-2', 2.5, { scaleX: 0.5, scaleY: 0, alpha: 0, ease: Expo.easeOut }, '-=2.0');

  }

  changePhoto(): void {
    let nomPhoto;
    if (this.photoIndice === 0) {
      nomPhoto = 'Photo_007.jpg';
      this.photoIndice++;
    } else {
      nomPhoto = 'Photo_008.jpg';
      this.photoIndice--;
    };
    console.log('I need a ' + nomPhoto + new Date());

    const storageRef = this.fb.storage().ref().child('photos/' + nomPhoto);
    storageRef.getDownloadURL().then(url => this.photoUrl = url);

  }

}