Why onRepeat function in tweenMax works only once?

[iyaroslav 0 Likes (Newbie)]

Why onRepeat function in tweenMax works only once?

See the Pen rLwjxp by iyaroslavm (@iyaroslavm) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Thanks for the demos. This is the syntax you want to use:

TweenMax.to(logo, 1, {left:"300px", repeat:10, yoyo:true, onRepeat: test});

http://codepen.io/GreenSock/pen/Bzkpqk?editors=0011

 

onRepeat:test passes a reference to the function where as you were invoking the function with onRepeat:test()

[iyaroslav 0 Likes (Newbie)]

sorry, I find my error.

[iyaroslav 0 Likes (Newbie)]

Thank you very much!

[LaurentSouchet 0 Likes (Newbie)]

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

  }

}

[Carl 9,066 Likes (Superhero)]

Hi lauren,

 

Welcome to the GreenSock forums. 

It is always best to supply a simple demo, preferably without any Angular code which is likely unrelated to the problem.

From what I can see the solution for you would be the same.

 

change:

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

to

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